/* Digital Bloom — Guide de démarrage
   Charte du 21 octobre 2026 : fondations communes à toutes les pages du guide.

   Les valeurs de la charte (couleurs, polices, rayons, tailles de texte, espacements) viennent
   toutes de tokens.css, généré depuis le design system (tools/synchroniser-tokens.py). Ce fichier
   et app.css les lisent, sans jamais les recopier. Règles de la charte : pas d'ombres, pas de
   dégradés, tout est arrondi, filets de 1,5 px, un seul bouton rose par écran. */

:root {
  /* Valeurs de la charte qui ne sont pas (encore) dans tokens.json : à y ajouter par Nathanaël. */
  --filet: 1.5px;            /* épaisseur des filets et contours */
  --focus-anneau: 2px;       /* anneau de focus clavier (couleur ink) */
  --focus-decalage: 3px;

  /* Échelle d'espacement du guide, calculée à partir des espacements de la charte. */
  --e1: var(--space-1);                       /* 4 */
  --e2: var(--space-2);                       /* 8 */
  --e3: var(--space-3);                       /* 12 */
  --e4: var(--space-4);                       /* 16 */
  --e5: calc(var(--space-5) * 0.75);          /* 24 */
  --e6: var(--space-5);                       /* 32 */
  --e7: calc(var(--space-6) * 0.75);          /* 48 */
  --e8: var(--space-6);                       /* 64 */

  /* Gabarit du guide (pas de la charte). */
  --menu-l: 19rem;
  --lecture-l: 46rem;
  --marge: var(--gutter-mobile);

  /* Tailles de texte qui changent entre téléphone et ordinateur (valeurs « Mobile » de la charte). */
  --t-corps: var(--b-body-size-mobile);
  --t-h1: var(--b-h1-size-mobile);
  --t-h2: var(--b-h2-size-mobile);
  --t-h3: var(--b-card-title-size-mobile);

  /* Couleur de partie, redéfinie par [data-partie] (voir la logique dans docs/guide-interactif.md).
     --partie : repère plein (pastille, tag, barre) ; --sur-partie : texte posé dessus ;
     --partie-doux : fond doux des en-têtes. Le texte courant reste toujours en ink. */
  --partie: var(--violet);
  --sur-partie: var(--white);
  --partie-doux: var(--lilac);
}

[data-partie='A'] { --partie: var(--violet); --sur-partie: var(--white); --partie-doux: var(--lilac); }
[data-partie='B'] { --partie: var(--green);  --sur-partie: var(--white); --partie-doux: var(--mint); }
[data-partie='C'] { --partie: var(--gold);   --sur-partie: var(--ink);   --partie-doux: var(--blush); }
[data-partie='D'] { --partie: var(--ink);    --sur-partie: var(--white); --partie-doux: var(--white); }

@media (min-width: 64em) {
  :root {
    --t-corps: var(--b-body-size);
    --t-h1: var(--b-h1-size);
    --t-h2: var(--b-h2-size);
    --t-h3: var(--b-block-title-size);
  }
}

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

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

/* Une adresse e-mail ne se coupe jamais au tiret (contact@digital-\nbloom.shop). */
a[href^='mailto:'] { white-space: nowrap; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-brand-sans);
  font-size: var(--t-corps);
  line-height: var(--b-body-line);
  font-weight: var(--b-body-weight);
}

img { max-width: 100%; }

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

h1, h2, h3, h4 {
  font-family: var(--font-brand-display);
  font-weight: var(--b-h1-weight);
  letter-spacing: var(--b-h1-spacing);
  margin: 0 0 var(--e3);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: var(--b-h1-line); }
h2 { font-size: var(--t-h2); line-height: var(--b-h2-line); }
h3 { font-size: var(--t-h3); line-height: var(--b-block-title-line); letter-spacing: var(--b-block-title-spacing); }
h4 { font-size: var(--t-corps); line-height: var(--b-body-line); letter-spacing: 0; }

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

strong { font-weight: var(--b-button-weight); }

.chapo {
  font-size: calc(var(--t-corps) * 1.12);
  line-height: var(--b-body-line);
  color: var(--muted);
  max-width: 34em;
}

/* Étiquette de section : capitales, 12 px, 700, interlettrage 0,14 em (b-label). */
.surtitre {
  font-size: var(--b-label-size);
  font-weight: var(--b-label-weight);
  line-height: var(--b-label-line);
  letter-spacing: var(--b-label-spacing);
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 var(--e2);
}

/* Note manuscrite : une par écran au plus (Caveat, violet). */
.annotation {
  font-family: var(--font-hand);
  font-size: var(--note-size);
  line-height: 1.25;
  color: var(--violet);
}

.discret { color: var(--muted); font-size: var(--b-small-size); line-height: var(--b-small-line); }

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

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

a { color: var(--pink-dark); text-decoration-thickness: var(--filet); text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

/* ---------- Boutons (composant Button) ----------
   Principal : fond rose, texte blanc, UN seul par écran. Secondaire : contour ink.
   Désactivé : fond lilac, texte disabled. Survol du principal : pink-dark. */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--touch-min);
  padding: var(--e2) var(--e5);
  border: var(--filet) solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--pink);
  color: var(--white);
  font-family: var(--font-brand-sans);
  font-size: var(--b-button-size);
  font-weight: var(--b-button-weight);
  line-height: var(--b-button-line);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background-color: var(--pink-dark); color: var(--white); }
.bouton:active { transform: translateY(1px); }

.bouton--second {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.bouton--second:hover { background-color: var(--lilac); color: var(--ink); }

/* Bouton discret : une action rare ou sensible, présentée comme un lien. */
.bouton--discret {
  background-color: transparent;
  border-color: transparent;
  color: var(--ink);
  padding-inline: 0;
  font-weight: var(--b-body-weight);
  text-decoration: underline;
  text-decoration-thickness: var(--filet);
  text-underline-offset: 0.2em;
}
.bouton--discret:hover { background-color: var(--lilac); color: var(--ink); }

.bouton[disabled], .bouton[aria-disabled='true'] {
  background-color: var(--lilac);
  border-color: transparent;
  color: var(--disabled);
  cursor: not-allowed;
  transform: none;
}

/* ---------- Focus clavier : anneau ink, décalage de 3 px ---------- */

:focus-visible {
  outline: var(--focus-anneau) solid var(--ink);
  outline-offset: var(--focus-decalage);
}

.saut-contenu {
  position: absolute;
  left: var(--e3);
  top: var(--e3);
  z-index: 60;
  transform: translateY(-200%);
  background-color: var(--white);
  color: var(--ink);
  padding: var(--e2) var(--e4);
  border: var(--filet) solid var(--ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: var(--b-button-weight);
}
.saut-contenu:focus { transform: translateY(0); }

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

.carte {
  background-color: var(--white);
  border: var(--filet) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--e5);
}

/* ---------- Jauge de progression (vert : ce qui est validé) ---------- */

.jauge {
  height: var(--e2);
  background-color: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.jauge > span {
  display: block;
  height: 100%;
  background-color: var(--green);
  border-radius: var(--radius-pill);
}

/* ---------- 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(--e4); align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .bouton:active { transform: none; }
}