/* ============================================================
   Explique — l'habillage

   Les couleurs sont celles de Mission STMG : un élève qui arrive ici
   depuis la plateforme doit reconnaître la maison. L'accent est l'ambre
   du « bouton magique », parce que c'est de lui que vient cette page.

   ⚠️ AUCUNE POLICE DISTANTE. Charger Google Fonts enverrait l'adresse
      IP de chaque élève — souvent mineur — à un tiers (§2.5), et cette
      page est faite pour être ouverte par toute une classe. La pile
      système rend très bien.
============================================================ */

:root {
  --ex-encre:  #1a1430;
  --ex-doux:   #6b6485;
  --ex-bord:   #efeaf6;
  --ex-fond:   #fdfbf7;
  --ex-ambre:  #f59e0b;
  --ex-ambre-f:#fffbeb;
  --ex-violet: #7c3aed;
  --ex-cyan:   #0891b2;
  --ex-ombre:  0 2px 10px rgba(26, 20, 48, .06);
  --ex-ombre-f:0 10px 30px rgba(26, 20, 48, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ex-encre);
  background: var(--ex-fond);
  line-height: 1.6;
}

/* Un halo discret, le même esprit que les autres sites de la maison. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 30rem at 15% -10%, rgba(245, 158, 11, .10), transparent 60%),
    radial-gradient(50rem 28rem at 95% 0%, rgba(124, 58, 237, .08), transparent 60%);
}

.ex-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.4rem 1.1rem 3rem;
}

/* ------------------------------------------------------------
   L'en-tête
------------------------------------------------------------ */
.ex-tete h1 {
  margin: 0 0 .3rem;
  font-size: clamp(2rem, 6vw, 2.8rem);
  letter-spacing: -.02em;
}
.ex-etoile { color: var(--ex-ambre); }
.ex-sous {
  margin: 0 0 1.6rem;
  font-size: 1.08rem;
  color: var(--ex-doux);
}

/* ------------------------------------------------------------
   Le champ
------------------------------------------------------------ */
.ex-form { margin: 0 0 1.4rem; }

.ex-champ { display: block; }
.ex-lab {
  display: block;
  margin-bottom: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ex-doux);
}

#notion {
  width: 100%;
  padding: .95rem 1.1rem;
  font: inherit;
  font-size: 1.25rem;
  color: var(--ex-encre);
  background: #fff;
  border: 2px solid var(--ex-bord);
  border-radius: 14px;
  box-shadow: var(--ex-ombre);
  transition: border-color .14s;
}
#notion:focus {
  outline: none;
  border-color: var(--ex-ambre);
}
#notion::placeholder { color: #bdb6cf; }

.ex-aide {
  margin: .5rem 0 1rem;
  font-size: .9rem;
  color: var(--ex-doux);
}

.ex-b {
  padding: .8rem 1.5rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--ex-encre);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .14s, opacity .14s;
}
.ex-b:hover:not(:disabled) { transform: translateY(-1px); }
.ex-b:disabled { opacity: .55; cursor: progress; }

/* ------------------------------------------------------------
   Les idées
------------------------------------------------------------ */
.ex-idees { margin: 0 0 1.8rem; }
.ex-idees-t {
  margin: 0 0 .5rem;
  font-size: .9rem;
  color: var(--ex-doux);
}
.ex-idees ul {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ex-puce {
  padding: .4rem .8rem;
  font: inherit;
  font-size: .9rem;
  color: var(--ex-encre);
  background: #fff;
  border: 1px solid var(--ex-bord);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .14s;
}
.ex-puce:hover { border-color: var(--ex-ambre); }

/* ------------------------------------------------------------
   La réponse
------------------------------------------------------------
   ⚠️ TROIS BLOCS, DANS CET ORDRE, et c'est celui du « bouton magique »
      de Mission STMG : la version simple D'ABORD, la définition du
      cours ensuite, l'exemple à la fin.

      L'inverse serait plus logique et moins utile : un élève qui n'a
      rien compris en cours a déjà lu la définition académique, et c'est
      précisément elle qui l'a perdu.
------------------------------------------------------------ */
.ex-rep { margin: 0 0 2rem; }

.ex-carte {
  padding: 1.3rem 1.4rem;
  background: #fff;
  border: 1px solid var(--ex-bord);
  border-radius: 18px;
  box-shadow: var(--ex-ombre-f);
}

.ex-terme {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}

.ex-bloc { margin: 0 0 1.1rem; }
.ex-bloc:last-child { margin-bottom: 0; }

.ex-bloc-t {
  display: inline-block;
  margin-bottom: .35rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ex-bloc p { margin: 0; }

.ex-simple {
  padding: 1rem 1.1rem;
  background: var(--ex-ambre-f);
  border-left: 5px solid var(--ex-ambre);
  border-radius: 12px;
}
.ex-simple .ex-bloc-t { color: #92400e; }
.ex-simple p { font-size: 1.1rem; }

.ex-aca .ex-bloc-t { color: var(--ex-violet); }
.ex-aca p { color: var(--ex-doux); }

.ex-exemple {
  padding: 1rem 1.1rem;
  background: #f0fdf4;
  border-left: 5px solid #4ade80;
  border-radius: 12px;
}
.ex-exemple .ex-bloc-t { color: #166534; }

/* D'où vient la réponse. Court, discret, et jamais tu. */
.ex-prov {
  margin: .9rem 0 0;
  font-size: .85rem;
  color: var(--ex-doux);
}
.ex-prov b { color: var(--ex-encre); }

/* L'attente et les soucis */
.ex-attente, .ex-souci {
  padding: 1rem 1.2rem;
  border-radius: 14px;
}
.ex-attente {
  color: #0d5c6b;
  background: #eafaff;
  border-left: 5px solid var(--ex-cyan);
}
.ex-souci {
  color: #9f1239;
  background: #fff1f2;
  border-left: 5px solid #fb7185;
}

/* ------------------------------------------------------------
   Le pied
------------------------------------------------------------ */
.ex-pied {
  padding-top: 1.6rem;
  border-top: 1px solid var(--ex-bord);
  font-size: .88rem;
  color: var(--ex-doux);
}
.ex-pied p { margin: 0 0 .7rem; }
.ex-pied strong { color: var(--ex-encre); }
.ex-pied-liens a { color: var(--ex-violet); }

@media (prefers-reduced-motion: reduce) {
  .ex-b, .ex-puce, #notion { transition: none; }
  .ex-b:hover:not(:disabled) { transform: none; }
}