/* Le projet dont vous êtes le héros agile — feuille unique, sans dépendance */

@font-face {
  font-family: "Overlock";
  src: url("../fonts/overlock-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Overlock";
  src: url("../fonts/overlock-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --papier: #f6efdf;
  --papier-fonce: #ebe0c6;
  --encre: #2b2118;
  --encre-douce: #6b5a48;
  --accent: #9c2b1f;
  --lien: #7a3b12;
  --bord: #cdbb98;
  --rouge: #c0392b;
  --bleu: #2c6aa0;
  --jaune: #c9a227;
  --vert: #3d8b40;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1d1813;
    --papier-fonce: #2a231b;
    --encre: #eadfca;
    --encre-douce: #b5a68e;
    --accent: #e0745f;
    --lien: #e8a96a;
    --bord: #4a3d2e;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-width: 64rem;
  padding: 0 1rem 2rem;
  background: var(--papier);
  color: var(--encre);
  font: 1.15rem/1.55 "Overlock", "Palatino Linotype", Georgia, serif;
}

a { color: var(--lien); }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { line-height: 1.2; }

.entete {
  border-bottom: 2px solid var(--bord);
  margin: 1.5rem 0 1.5rem;
  padding-bottom: .75rem;
}
.entete h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--accent); }
.sous-titre { margin: .25rem 0 0; font-size: 1.3rem; color: var(--encre-douce); }

.page.avec-illustration {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.illustration { margin: 0; }
.illustration img { width: 100%; height: auto; border-radius: 4px; }

.texte img { max-width: 100%; height: auto; }
.texte img.gauche { float: left; margin: 0 1rem .5rem 0; max-width: 40%; }
.alerte { color: var(--accent); }

/* Choix proposés au groupe */
.choix-liste { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .6rem; }
.choix {
  display: block;
  width: 100%;
  padding: .7rem 1rem .7rem 2.6rem;
  position: relative;
  background: var(--papier-fonce);
  border: 1px solid var(--bord);
  border-radius: 6px;
  color: var(--encre);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.choix::before {
  content: "";
  position: absolute;
  left: .9rem;
  top: 50%;
  width: .9rem;
  height: 1.1rem;
  margin-top: -.55rem;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--accent);
}
.choix-rouge::before { background: var(--rouge); }
.choix-bleu::before { background: var(--bleu); }
.choix-jaune::before { background: var(--jaune); }
.choix-vert::before { background: var(--vert); }
.choix:hover, .choix:focus-visible { border-color: var(--accent); color: var(--encre); }

/* Fenêtres de conséquence */
dialog {
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 1.5rem;
  background: var(--papier);
  color: var(--encre);
  border: 2px solid var(--bord);
  border-radius: 8px;
}
dialog::backdrop { background: rgb(0 0 0 / .55); }
dialog h2 { margin-top: 0; font-size: 1.4rem; color: var(--accent); }
.suite { display: flex; gap: .75rem; align-items: center; margin-bottom: 0; }

.bouton, .sablier button, .fermer {
  display: inline-block;
  padding: .45rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.bouton { background: var(--accent); color: var(--papier); }
.bouton:hover { color: var(--papier); filter: brightness(1.1); }
.fermer, .sablier button { background: transparent; color: var(--encre); border-color: var(--bord); }

/* Audio */
figure.audio { margin: 1.5rem 0; }
figure.audio figcaption { color: var(--encre-douce); margin-bottom: .3rem; }
audio { width: 100%; max-width: 24rem; }

/* Sablier */
.sablier { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.5rem 0; }
.sablier-temps { font-size: 2rem; font-variant-numeric: tabular-nums; min-width: 5ch; }
.sablier-tour { color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* Cartes cliquables */
.carte { position: relative; border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; }
.carte svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; user-select: none; }
.carte svg:active { cursor: grabbing; }
.carte svg image { pointer-events: none; }
.carte-zoom { position: absolute; top: .5rem; right: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.carte-zoom button {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--bord);
  border-radius: 4px;
  background: var(--papier);
  color: var(--encre);
  font: 1.4rem/1 sans-serif;
  cursor: pointer;
  opacity: .9;
}
.carte-zoom button:hover { border-color: var(--accent); }
.carte a circle, .carte a polygon { fill: transparent; stroke: transparent; stroke-width: 6; }
.carte a:hover circle, .carte a:hover polygon,
.carte a:focus-visible circle, .carte a:focus-visible polygon { fill: rgb(255 230 150 / .25); stroke: var(--accent); }

.pied {
  clear: both;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 2px solid var(--bord);
  color: var(--encre-douce);
}

@media (max-width: 40rem) {
  .page.avec-illustration { grid-template-columns: 1fr; gap: 1rem; }
  .illustration { max-width: 12rem; }
}