/* Digital Bloom — Guide de démarrage
   Jetons de la charte « Forêt » : couleurs, polices, espacements, composants de base.
   Règles de la charte : pas d'ombres, pas de dégradés, bords arrondis, filets fins. */

:root {
  /* Couleurs de la charte Forêt */
  --foret: #1F3A2F;
  --creme: #F0EAE3;
  --papier: #F7F3EC;
  --carte: #EADFC9;
  --tint: #E4DCCB;
  --filet: #D3C9B5;
  --sable: #C3AD82;
  --label: #5E5A48;
  --terre: #8A5B43;
  --mousse: #5F6B4E;
  --olive: #8C8A5A;

  /* Couleur de partie : redéfinie par [data-partie] sur l'en-tête de chapitre.
     --sur-partie est la couleur de texte posée sur --partie. */
  --partie: var(--foret);
  --sur-partie: var(--creme);

  /* Polices */
  --titre: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texte: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --main: 'Caveat', 'Segoe Script', cursive;

  /* Échelle d'espacement (4 px) */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  /* Rayons et filets */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;
  --trait: 1px solid var(--filet);

  /* Gabarit */
  --menu-l: 19rem;
  --lecture-l: 46rem;
  --tactile: 44px;
}

[data-partie='A'] { --partie: var(--foret); --sur-partie: var(--creme); }
[data-partie='B'] { --partie: var(--terre); --sur-partie: var(--creme); }
[data-partie='C'] { --partie: var(--mousse); --sur-partie: var(--creme); }
/* L'olive est trop clair pour un texte crème : sur la partie D le texte passe en forêt. */
[data-partie='D'] { --partie: var(--olive); --sur-partie: var(--foret); }

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--papier);
  color: var(--foret);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
}

/* ---------- Titres et texte ---------- */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--e3);
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); }
h3 { font-size: 1.3125rem; }
h4 { font-size: 1.125rem; font-family: var(--texte); font-weight: 600; }

p, ul, ol { margin: 0 0 var(--e4); }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: var(--e2); }
li::marker { color: var(--sable); }

strong { font-weight: 600; }

.chapo {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--label);
  max-width: 34em;
}

.surtitre {
  font-family: var(--texte);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 var(--e2);
}

.annotation {
  font-family: var(--main);
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--terre);
}

.discret { color: var(--label); font-size: 0.9375rem; }

hr, .filet {
  border: 0;
  border-top: var(--trait);
  margin: var(--e6) 0;
}

/* ---------- Liens ---------- */

a { color: var(--foret); text-decoration-color: var(--sable); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--foret); }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--tactile);
  padding: var(--e2) var(--e5);
  border: 1px solid var(--foret);
  border-radius: var(--r-m);
  background-color: var(--foret);
  color: var(--creme);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover { background-color: #172c23; }

.bouton--second {
  background-color: transparent;
  color: var(--foret);
  border-color: var(--filet);
}
.bouton--second:hover { background-color: var(--tint); border-color: var(--foret); }

.bouton--discret {
  background-color: transparent;
  border-color: transparent;
  color: var(--label);
  padding-inline: var(--e3);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--filet);
}
.bouton--discret:hover { color: var(--foret); background-color: var(--tint); }

.bouton[disabled], .bouton[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Focus clavier ---------- */

:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

.saut-contenu {
  position: absolute;
  left: var(--e3);
  top: var(--e3);
  z-index: 60;
  transform: translateY(-200%);
  background-color: var(--foret);
  color: var(--creme);
  padding: var(--e2) var(--e4);
  border-radius: var(--r-m);
  text-decoration: none;
  font-weight: 600;
}
.saut-contenu:focus { transform: translateY(0); }

/* ---------- Cartes ---------- */

.carte {
  position: relative;
  background-color: var(--creme);
  border: var(--trait);
  border-radius: var(--r-l);
  padding: var(--e5);
}

.carte--sable { background-color: var(--carte); }

/* Ruban adhésif : un rectangle translucide posé en haut de la carte. */
.carte--ruban { margin-top: var(--e5); }
.carte--ruban::before {
  content: '';
  position: absolute;
  top: calc(var(--e4) * -1);
  left: 50%;
  width: 7.5rem;
  height: 1.75rem;
  transform: translateX(-50%) rotate(-1.6deg);
  background-color: rgba(195, 173, 130, 0.55);
  border-left: 1px solid rgba(94, 90, 72, 0.18);
  border-right: 1px solid rgba(94, 90, 72, 0.18);
  border-radius: 2px;
}

/* Bord de page « déchiré », à poser sous un en-tête coloré. */
.bord-dechire { position: relative; }
.bord-dechire::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 8px;
  background-color: var(--papier);
  -webkit-mask-image: var(--dechirure);
  mask-image: var(--dechirure);
  -webkit-mask-size: 220px 8px;
  mask-size: 220px 8px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
:root {
  --dechirure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V5.4l7-1.1 6 1.6 8-2 5 1.2 9-1.7 6 2.1 7-1.4 8 1 6-2.2 9 1.9 5-1.1 8 1.5 7-2 6 1.2 9-1.6 5 1.8 8-1.3 6 1.6 7-2.1 9 1.4 5-1 8 1.9 6-1.5 7 1.1 9-1.8 5 1.3 8-1.6 6 2 7-1.2 5 1.5V8z' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- Puce de progression ---------- */

.jauge {
  height: 8px;
  background-color: var(--tint);
  border-radius: 99px;
  overflow: hidden;
}
.jauge > span {
  display: block;
  height: 100%;
  background-color: var(--partie);
  border-radius: 99px;
}

/* ---------- Utilitaires ---------- */

.pour-lecteur-ecran {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pile { display: flex; flex-direction: column; gap: var(--e4); }
.ligne { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}