/* Version : 1.3 */
/* =====================================================================
   QuantumSite — pages de fiches (Fiches Quantiques, Fiches Mathématiques, Fiches Informatiques, Axiomisation)
   Complète css/style.css (en-tête, couleurs du site).
   ===================================================================== */

.page-fiches {
  --accent: var(--cyan);
  --accent-voile: rgba(95, 212, 255, 0.14);
  --verre: rgba(8, 20, 48, 0.62);
  --verre-clair: rgba(14, 30, 66, 0.82);
  --trait: rgba(159, 179, 214, 0.22);
  --serif: "Spectral", "Cambria Math", "STIX Two Text", Georgia, serif;

  /* Palette des illustrations (version sombre des anciennes cartes) */
  --ink: #e8eaf7;
  --muted: #9ca2ca;
  --acc: #f2b33d;
  --acc2: #a39dff;
  --acc-s: #4a3a1c;
  --acc2-s: #302e70;
  --muted-s: #272d5c;
}

.page-fiches.theme-maths {
  --accent: #f2c879;                       /* le cœur doré de la galaxie */
  --accent-voile: rgba(242, 200, 121, 0.14);
}

.page-fiches.theme-axiomes {
  --accent: #b8a6ff;                       /* violet des illustrations, un ton plus clair */
  --accent-voile: rgba(184, 166, 255, 0.16);
}

.page-fiches.theme-informatique {
  --accent: #7fe3b2;                       /* vert des pistes de circuit */
  --accent-voile: rgba(127, 227, 178, 0.14);
}

/* L'image de l'accueil, floutée et assombrie, fixée derrière le contenu */
.page-fiches::before {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: -1;
  background: url("../images/fond-accueil.jpeg") center / cover no-repeat;
  filter: blur(30px) brightness(0.4) saturate(1.2);
}

.page-fiches .menu a::after { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.fiches {
  min-height: 100%;
  padding: calc(var(--hauteur-entete) + 2.5rem) 1.75rem 3rem;
}

/* ================= Vue « thèmes » ================= */
/* La page tient dans la hauteur de l'écran : la grille prend la place restante
   et js/fiches.js choisit le nombre de colonnes et de rangées. */

.vue-themes {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--hauteur-entete) + clamp(0.75rem, 2.5vh, 1.75rem));
  padding-bottom: clamp(0.75rem, 2.5vh, 1.5rem);
  overflow: hidden;
}

.themes {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.themes-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.3rem 2rem;
  margin-bottom: clamp(0.75rem, 2.2vh, 1.4rem);
}

.themes-titre {
  margin: 0;
  font-size: clamp(1.5rem, 3.6vh, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
}

.themes-intro {
  margin: 0.2rem 0 0;
  color: var(--texte);
  font-size: 0.98rem;
}

.themes-bilan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.2rem;
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.88rem;
}

/* Préambule facultatif, entre le titre et les vignettes (page Axiomisation) */
.themes-preambule {
  max-width: 78ch;
  margin: 0 0 clamp(0.75rem, 2.2vh, 1.4rem);
  padding: 0.55rem 1rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--verre);
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.2vh, 1.08rem);
  line-height: 1.5;
}

.grille-vignettes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rangees, 5), minmax(0, 1fr));
  gap: clamp(0.45rem, 1.2vh, 0.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.grille-vignettes li { min-width: 0; min-height: 0; }
.grille-vignettes li:has(.vignette-toutes) { grid-column: span 2; }

/* Chaque vignette est un conteneur : sa taille décide de la forme de son contenu
   (voir les règles @container plus bas). */
.vignette {
  position: relative;
  display: block;
  height: 100%;
  container-type: size;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--verre);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--texte);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s, background-color 0.2s;
}
.vignette:hover { border-color: var(--accent); background: var(--verre-clair); }
.vignette:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Forme « carte » : symbole en haut, nom et nombre de fiches en bas */
.vignette-corps {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.85rem 1rem 0.95rem;
}

/* Le symbole du thème est l'élément marquant de chaque vignette */
.vignette-symbole {
  margin-bottom: auto;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 30cqh, 2.6rem);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-voile), 0 0 4px var(--accent-voile);
}
.vignette-toutes .vignette-symbole { font-size: clamp(1.5rem, 38cqh, 3.2rem); }
.vignette-symbole sup, .vignette-symbole sub,
.paquet-symbole sup, .paquet-symbole sub { font-size: 0.55em; line-height: 0; }

.vignette-nom {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.vignette-compte {
  margin-top: 0.1rem;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--texte-doux);
  white-space: nowrap;
}

/* Forme « ligne » (vignette basse) : symbole à gauche, nom et nombre de fiches à droite */
@container (height < 100px) {
  .vignette-corps {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 0.65rem;
    padding: 0.3rem 0.75rem;
  }
  .vignette-symbole,
  .vignette-toutes .vignette-symbole {
    grid-row: 1 / 3;
    margin: 0;
    font-size: clamp(1.05rem, 40cqh, 1.7rem);
    min-width: 1.4em;
    text-align: center;
  }
  .vignette-nom { font-size: 0.86rem; line-height: 1.15; }
  .vignette-compte { font-size: 0.74rem; }
}
@container (height < 60px) {
  .vignette-compte { display: none; }
  .vignette-symbole,
  .vignette-toutes .vignette-symbole { grid-row: auto; }
}

/* Part des fiches connues, le long du bord inférieur */
.vignette-jauge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(159, 179, 214, 0.12);
}
.vignette-jauge span { display: block; height: 100%; background: var(--acc2); }

.vignette-toutes { background: linear-gradient(135deg, var(--accent-voile), transparent 70%), var(--verre); }

/* « À revoir » est une liste personnelle : bord en pointillé, couleur des marques */
.vignette-a-revoir { border-style: dashed; }
.vignette-a-revoir .vignette-symbole { color: var(--acc); text-shadow: none; }

.lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lien:hover { color: var(--texte); }
.lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ================= Vue « paquet » ================= */
/* Même principe : la fiche prend la hauteur disponible, rien ne déborde de l'écran. */

.vue-paquet {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--hauteur-entete) + clamp(0.5rem, 2vh, 1.25rem));
  padding-bottom: clamp(0.5rem, 2vh, 1.25rem);
  overflow: hidden;
}

.paquet {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.paquet-barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.bouton-retour {
  justify-self: start;
  padding: 0.3rem 0;
  color: var(--texte-doux);
  font-size: 0.95rem;
  text-decoration: none;
}
.bouton-retour:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 4px; }
.bouton-retour:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.paquet-titre {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
}
.paquet-symbole { font-family: var(--serif); color: var(--accent); white-space: nowrap; }

.paquet-compteur {
  justify-self: end;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.paquet-progression {
  height: 2px;
  margin-top: clamp(0.4rem, 1.2vh, 0.8rem);
  border-radius: 1px;
  background: var(--trait);
  overflow: hidden;
}
.paquet-progression span {
  display: block;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: width 0.25s;
}

.paquet-scene {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: clamp(0.6rem, 2vh, 1.4rem) 0;
}

/* ---------- La fiche : recto et verso empilés, retournement 3D ---------- */

.carte {
  width: 100%;
  max-width: 720px;
  height: 100%;
  max-height: 560px;
  margin: auto 0;
  perspective: 1600px;
  border-radius: 18px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.carte-interieur {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.carte.retournee .carte-interieur { transform: rotateY(180deg); }

/* Le contenu de la fiche se dimensionne d'après la hauteur de la fiche (unités cqh) */
.carte-face {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(0.7rem, 5cqh, 1.75rem) clamp(0.9rem, 5cqw, 2rem);
  border: 1px solid var(--trait);
  border-radius: 18px;
  background: var(--verre-clair);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
  overflow: hidden auto;            /* une définition très longue défile dans la fiche, jamais la page */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.carte-verso {
  transform: rotateY(180deg);
  border-color: var(--accent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 40px var(--accent-voile);
}

.carte:focus-visible .carte-face { outline: 2px solid rgba(230, 238, 252, 0.5); outline-offset: 4px; }

.ill { display: block; flex-shrink: 1; width: 100%; max-width: 430px; height: auto; max-height: 50cqh; }
.ill.petite { max-width: 220px; max-height: 30cqh; }

.carte-meta { margin: clamp(0.3rem, 2.5cqh, 0.9rem) 0 0; font-size: clamp(0.75rem, 3cqh, 0.85rem); color: var(--accent); }

.carte-terme {
  margin: 0.2rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 7.5cqh, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
}
.carte-terme.petit { font-size: clamp(1.15rem, 6.5cqh, 1.8rem); }

.carte-formule {
  max-width: 100%;
  margin: clamp(0.35rem, 2.2cqh, 0.8rem) 0 0;
  padding: 0.4rem 0.9rem;
  border-radius: 10px;
  background: rgba(39, 45, 92, 0.75);
  font-family: var(--serif);
  font-size: clamp(0.98rem, 5cqh, 1.25rem);
  line-height: 1.5;
  overflow-x: auto;
}

.carte-definition {
  max-width: 54ch;
  margin: clamp(0.35rem, 2.5cqh, 0.9rem) 0 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 5.2cqh, 1.3rem);
  line-height: 1.55;
  text-align: left;
}
.carte-formule sub, .carte-formule sup,
.carte-definition sub, .carte-definition sup { font-size: 0.68em; line-height: 0; }

.carte-aide { margin: clamp(0.4rem, 3cqh, 1rem) 0 0; font-size: clamp(0.75rem, 3cqh, 0.85rem); color: var(--texte-doux); }

/* Classes des illustrations SVG (reprises des anciennes cartes) */
.tx { font-family: var(--serif); fill: var(--ink); }
.l { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.l.a { stroke: var(--acc); }
.l.b { stroke: var(--acc2); }
.l.m { stroke: var(--muted); }
.l.d { stroke-dasharray: 4 4; }
.l.w1 { stroke-width: 1.2; }
.sa { fill: var(--acc-s); }
.sb { fill: var(--acc2-s); }
.sm { fill: var(--muted-s); }
.fa { fill: var(--acc); }
.fb { fill: var(--acc2); }
.fi { fill: var(--ink); }
.fm { fill: var(--muted); }
.ta { fill: var(--acc); }
.tb { fill: var(--acc2); }
.tm { fill: var(--muted); }

/* ---------- Commandes ---------- */

.paquet-commandes {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.rangee { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }

.bouton {
  padding: clamp(0.45rem, 1.2vh, 0.65rem) 0.8rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--verre);
  color: var(--texte);
  font: inherit;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.bouton:hover:not(:disabled) { border-color: var(--accent); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bouton:disabled { opacity: 0.4; cursor: default; }

.bouton-principal { border-color: var(--accent); background: var(--accent-voile); }

/* Les deux marques gardent les couleurs des anciennes cartes : doré pour « À revoir », violet pour « Je la connais » */
.bouton-revoir { border-color: rgba(242, 179, 61, 0.55); }
.bouton-revoir[aria-pressed="true"] { background: var(--acc-s); border-color: var(--acc); }
.bouton-connue { border-color: rgba(163, 157, 255, 0.55); }
.bouton-connue[aria-pressed="true"] { background: var(--acc2-s); border-color: var(--acc2); }

.options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 1.4rem;
  font-size: 0.85rem;
  color: var(--texte-doux);
}
.options label { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.options input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.options input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clavier { order: 3; }

.paquet-vide {
  max-width: 46ch;
  text-align: center;
  color: var(--texte-doux);
  font-size: 1.08rem;
  line-height: 1.6;
}
.paquet-vide .bouton { display: inline-block; margin-top: 1rem; }

/* ================= Écrans étroits ================= */

@media (max-width: 900px) {
  .fiches { padding-left: 1rem; padding-right: 1rem; }
  .clavier { display: none; }
}

@media (max-width: 640px) {
  .themes-intro { display: none; }
  .themes-preambule { font-size: 0.88rem; padding: 0.45rem 0.75rem; }
  .themes-titre { font-size: 1.35rem; }
  .themes-bilan { font-size: 0.8rem; }
  .paquet-barre { grid-template-columns: 1fr auto; row-gap: 0.15rem; }
  .paquet-titre { grid-column: 1 / -1; grid-row: 2; justify-content: center; font-size: 1.1rem; }
  .rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rangee [data-action="precedente"] { order: 1; }
  .rangee [data-action="suivante"]   { order: 2; }
  .rangee [data-action="rev"]        { order: 3; }
  .rangee [data-action="ok"]         { order: 4; }
}

@media (max-height: 560px) {
  .options { display: none; }
  .themes-intro { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-interieur, .paquet-progression span, .vignette, .bouton { transition: none; }
}