/* =========================================================================
   fenetres.css — "Mets le cours et le logiciel cote a cote"
   -------------------------------------------------------------------------
   SOURCE UNIQUE. Deployee par scripts/12-exercices.py.

   L animation qui s ouvre a l entree d un module. Elle montre l ecran se
   partager en deux : le cours d un cote, le logiciel de l autre.

   POURQUOI UNE ANIMATION ET PAS UNE CAPTURE
     Le geste se comprend en le voyant se faire. Une capture montre l etat
     final, pas le mouvement -- et c est le mouvement qui apprend.

   TOUT EST DESSINE EN CSS : aucune image, aucune video. Quelques kilo-octets,
   net sur tous les ecrans, et lisible dans les deux themes.
   ========================================================================= */

/* ------------------------------------------------------------- le voile --- */

.fx-voile {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(10, 8, 16, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
  animation: fx-apparait .25s ease-out;
}
@keyframes fx-apparait { from { opacity: 0; } to { opacity: 1; } }

.fx-boite {
  position: relative;
  width: 100%; max-width: 620px;
  border-radius: var(--r-bloc, 18px); padding: 26px 28px 22px;
  /* OPAQUE, et pas var(--surface) : ce jeton vaut rgba(255,255,255,.045),
     c est un voile, pas une surface. Avec lui, le grand bandeau bleu de
     l accueil de Word se lisait a travers le texte de la boite. On part donc
     de --bg, qui est une vraie couleur dans les deux themes, relevee de 8 %
     vers --txt pour que la boite se detache du voile. La premiere
     declaration sert de repli si color-mix manque. */
  background: var(--bg, #08070D);
  background: color-mix(in srgb, var(--bg, #08070D) 92%, var(--txt, #ECE8F6));
  border: 1px solid var(--line, #2a2536);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  color: var(--txt, #ECE8F6);
}

.fx-fermer {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: var(--r-bloc, 10px); cursor: pointer;
  border: 1px solid var(--line-2, #3a3450);
  background: transparent; color: var(--txt-2, #A9A2C0);
  font-size: 18px; line-height: 1;
}
.fx-fermer:hover { color: var(--txt); border-color: var(--violet, #7E4DD2); }

.fx-kicker {
  margin: 0 0 4px; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-txt, #C9B3F5);
}
.fx-boite h2 { margin: 0 0 8px; font-size: 1.35rem; color: var(--txt); }
.fx-intro { margin: 0 0 18px; color: var(--txt-2); line-height: 1.6; font-size: .95rem; }

/* ------------------------------------------------------------ la scene --- */

.fx-scene {
  position: relative;
  height: 210px; margin: 0 0 18px;
  border-radius: var(--r-bloc, 14px); overflow: hidden;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--violet, #7E4DD2) 14%, transparent),
    color-mix(in srgb, var(--blue, #2B7FFF) 10%, transparent));
  border: 1px solid var(--line, #2a2536);
}

/* Le cadre de l ecran.
   SOMBRE DANS LES DEUX THEMES, et opaque : c est le dessin d un ecran
   d ordinateur, pas un element de la page. Avec un jeton translucide, le
   theme clair rendait les fenetres blanches et leurs traits -- du blanc a
   17 % -- disparaissaient : la grille d Excel etait vide. Vu sur l accueil
   d Excel BA3 le 25/09. */
.fx-ecran {
  position: absolute; inset: 14px 14px 26px;
  border-radius: var(--r-bloc, 8px);
  background: #0E0C16;
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
}
/* le pied de l ecran, pour qu on lise "un ordinateur"
   currentColor : il suit la couleur du texte, donc clair sur fond sombre et
   sombre sur fond clair, sans avoir a ecrire deux regles. */
.fx-socle {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 84px; height: 5px; border-radius: 3px;
  background: currentColor; opacity: .20;
}

/* les deux fenetres */
.fx-fen {
  position: absolute; top: 8%; height: 84%;
  border-radius: 6px; overflow: hidden;
  /* opaque et sombre, pour la meme raison que .fx-ecran ci-dessus */
  background: #241F33;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
}
.fx-barre {
  height: 18px; display: flex; align-items: center; gap: 4px;
  padding: 0 6px; background: rgba(255, 255, 255, .07);
  font-size: 7.5px; color: rgba(255, 255, 255, .75);
}
.fx-pt { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.fx-url {
  margin-left: 4px; padding: 1px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .10); letter-spacing: .02em;
}
.fx-titre-fen { font-weight: 700; letter-spacing: .04em; }

/* la fenetre du cours */
.fx-cours { left: 6%; width: 88%; animation: fx-vers-gauche 9s ease-in-out infinite; }
.fx-cours .fx-corps { padding: 8px 9px; display: grid; gap: 5px; }
.fx-ligne { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .17); }
.fx-ligne.courte { width: 55%; }
.fx-ligne.titre { height: 6px; width: 42%; background: var(--accent-txt, #C9B3F5); opacity: .8; }
.fx-bloc {
  margin-top: 4px; padding: 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 18%, transparent);
  border-left: 2px solid var(--violet, #7E4DD2);
  display: grid; gap: 4px;
}

/* la fenetre du logiciel
   Sa couleur et son contenu tiennent au data-logiciel de la scene : la meme
   animation sert Excel, Word, PowerPoint et Power BI.
   Les teintes sont celles des logiciels, et chacune tient le contraste avec
   son encre (>= 6:1) : le jaune de Power BI passe donc en encre sombre. */
.fx-logiciel {
  left: 52%; width: 42%; opacity: 0;
  animation: fx-arrive-droite 9s ease-in-out infinite;
}
.fx-logiciel .fx-barre {
  background: var(--fx-teinte, #185C37); color: var(--fx-encre, #fff);
}
.fx-scene[data-logiciel="excel"]      { --fx-teinte: #185C37; }
.fx-scene[data-logiciel="word"]       { --fx-teinte: #185ABD; }
.fx-scene[data-logiciel="powerpoint"] { --fx-teinte: #A93B1B; }
.fx-scene[data-logiciel="power-bi"]   { --fx-teinte: #E8B800; --fx-encre: #1A1400; }

/* un tableur : une grille */
.fx-grille { display: grid; grid-template-columns: repeat(4, 1fr); }
.fx-grille span {
  height: 11px; border-right: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.fx-grille span.entete {
  background: color-mix(in srgb, var(--fx-teinte, #185C37) 45%, transparent);
}
.fx-grille span.pleine { background: rgba(255, 255, 255, .06); }

/* Word : une page de texte */
.fx-doc { padding: 8px 9px; display: grid; gap: 5px; }

/* PowerPoint : la diapo en cours, et ses vignettes */
.fx-diapos { padding: 7px; display: grid; gap: 6px; }
.fx-diapo {
  height: 38px; padding: 0 8px; border-radius: 4px;
  display: grid; align-content: center; gap: 5px;
  background: color-mix(in srgb, var(--fx-teinte, #A93B1B) 16%, transparent);
  border: 1px solid rgba(255, 255, 255, .12);
}
.fx-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fx-vignettes span {
  height: 15px; border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

/* Power BI : des visuels */
.fx-viz { padding: 8px 9px; display: grid; gap: 7px; }
.fx-barres { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.fx-barres span {
  flex: 1; border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--fx-teinte, #E8B800) 60%, transparent);
}
.fx-barres span:nth-child(1) { height: 45%; }
.fx-barres span:nth-child(2) { height: 70%; }
.fx-barres span:nth-child(3) { height: 55%; }
.fx-barres span:nth-child(4) { height: 100%; }
.fx-barres span:nth-child(5) { height: 80%; }

/* le curseur qui passe d une fenetre a l autre */
.fx-curseur {
  position: absolute; width: 9px; height: 9px; z-index: 3;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  top: 55%; left: 30%; opacity: 0;
  animation: fx-curseur 9s ease-in-out infinite;
}

@keyframes fx-vers-gauche {
  0%, 14%   { left: 6%; width: 88%; }
  26%, 100% { left: 4%; width: 45%; }
}
@keyframes fx-arrive-droite {
  0%, 26%   { opacity: 0; transform: translateX(14px); }
  38%, 92%  { opacity: 1; transform: translateX(0); }
  100%      { opacity: 1; transform: translateX(0); }
}
@keyframes fx-curseur {
  0%, 40%   { opacity: 0; top: 55%; left: 26%; }
  48%       { opacity: 1; top: 55%; left: 26%; }
  62%       { opacity: 1; top: 42%; left: 70%; }
  74%       { opacity: 1; top: 62%; left: 74%; }
  86%       { opacity: 1; top: 55%; left: 26%; }
  100%      { opacity: 0; top: 55%; left: 26%; }
}

/* les touches, en bas de la scene */
.fx-touches {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--txt-2);
}
.fx-touche {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 24px; padding: 0 7px;
  border-radius: 6px; font-weight: 700; font-size: .76rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  animation: fx-frappe 9s ease-in-out infinite;
}
.fx-plus { color: var(--txt-2, #b8b0cc); }
@keyframes fx-frappe {
  0%, 10%  { transform: translateY(0); background: rgba(255, 255, 255, .12); }
  15%      { transform: translateY(2px); background: var(--violet, #7E4DD2); }
  22%, 34% { transform: translateY(0); background: rgba(255, 255, 255, .12); }
  40%      { transform: translateY(2px); background: var(--violet, #7E4DD2); }
  48%, 100% { transform: translateY(0); background: rgba(255, 255, 255, .12); }
}

/* --------------------------------------------------- Windows ou Mac ------ */

.fx-onglets { display: flex; gap: 6px; margin: 0 0 12px; }
.fx-onglet {
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2, #3a3450);
  background: transparent; color: var(--txt-2); font: inherit; font-size: .9rem; font-weight: 600;
}
.fx-onglet[aria-selected="true"] {
  background: color-mix(in srgb, var(--violet, #7E4DD2) 24%, transparent);
  border-color: var(--violet, #7E4DD2); color: var(--txt);
}

.fx-pas { margin: 0 0 10px; padding-left: 0; list-style: none; counter-reset: fx; display: grid; gap: 9px; }
.fx-pas li {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  align-items: baseline; color: var(--txt-2); font-size: .93rem; line-height: 1.55;
}
.fx-pas li::before {
  counter-increment: fx; content: counter(fx);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 20%, transparent);
  color: var(--accent-txt, #C9B3F5);
}
.fx-pas b { color: var(--txt); font-weight: 600; }
.fx-pas kbd {
  display: inline-block; padding: 1px 7px; margin: 0 1px;
  border-radius: 6px; font-size: .84em; font-weight: 700;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  color: var(--txt);
}
:root[data-theme="light"] .fx-pas kbd,
:root[data-theme="light"] .fx-touche {
  background: rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .18); color: #15111C;
}
.fx-note { margin: 0 0 16px; font-size: .86rem; color: var(--txt-2, #b8b0cc); line-height: 1.55; }

/* ------------------------------------------------------------- le pied --- */

.fx-pied { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fx-ok {
  padding: 11px 22px; border-radius: var(--r-bloc, 10px); cursor: pointer;
  border: 1px solid transparent; background: var(--accent-fond, var(--violet, #7E4DD2));
  color: var(--accent-encre, #fff); font: inherit; font-weight: 600;
}
.fx-ok:hover { filter: brightness(1.1); }
.fx-plus-tard {
  padding: 11px 16px; border-radius: var(--r-bloc, 10px); cursor: pointer;
  border: 1px solid var(--line-2, #3a3450); background: transparent;
  color: var(--txt-2); font: inherit; font-size: .92rem;
}

/* le bouton qui rejoue l animation, pose dans la page */
.fx-relance {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2, #3a3450);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 10%, transparent);
  color: var(--txt); font: inherit; font-size: .9rem; font-weight: 600;
}
.fx-relance:hover { border-color: var(--violet, #7E4DD2); }
/* Dans le bandeau d accueil (toujours sombre), le texte du theme clair
   tombait a 1,6:1 : le bouton y garde un texte clair. */
.hero .fx-relance { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------- petits ecrans --- */

@media (max-width: 640px) {
  .fx-boite { padding: 22px 18px 18px; }
  .fx-scene { height: 165px; }
  .fx-boite h2 { font-size: 1.15rem; }
}

/* Mouvement reduit : on montre l etat final, sans rien animer. */
@media (prefers-reduced-motion: reduce) {
  .fx-voile, .fx-cours, .fx-logiciel, .fx-curseur, .fx-touche { animation: none; }
  .fx-cours { left: 4%; width: 45%; }
  .fx-logiciel { opacity: 1; transform: none; }
  .fx-curseur { opacity: 0; }
}

/* Le bouton vert d une fenetre macOS, et le geste qui l accompagne : ce n est
   pas une touche du clavier, il ne doit donc pas y ressembler. */
.fx-touche-vert {
  background: #28C840; border-color: #1FA634; color: #0B2E12;
  min-width: 22px; padding: 0 4px; font-size: .6rem;
}
.fx-touche-texte {
  font-weight: 600; font-size: .72rem; letter-spacing: .01em;
  background: rgba(255, 255, 255, .08);
}
:root[data-theme="light"] .fx-touche-vert { color: #0B2E12; }