/* Identité relevée sur les planches de Tatiana — voir design/LISEZMOI.md.
   Rien n'est inventé ici : fond ivoire, titres prune, accent vin. */

:root {
  --fond:    #EFE9E1;
  --prune:   #5B3A54;
  --vin:     #A83E5C;
  --rose:    #C88DA1;
  --filet:   #D6CCC0;
  --encre:   #3A3236;
}

/* Règle A4 : beaucoup de belles polices n'ont AUCUN caractère cyrillique.
   Le navigateur bascule alors en silence sur une police système et
   l'application est cassée en russe sans le moindre message d'erreur.
   Onest et Playfair Display portent toutes deux le cyrillique — vérifié sur
   les sous-ensembles servis. Les fichiers sont embarqués (A8, E2) : aucune
   requête au démarrage, donc pas de texte invisible sur une connexion lente. */

@font-face { font-family: Onest; font-weight: 400; font-display: swap;
  src: url(polices/Onest-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; font-weight: 400; font-display: swap;
  src: url(polices/Onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Onest; font-weight: 400; font-display: swap;
  src: url(polices/Onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215; }

@font-face { font-family: Onest; font-weight: 500; font-display: swap;
  src: url(polices/Onest-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; font-weight: 500; font-display: swap;
  src: url(polices/Onest-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Onest; font-weight: 500; font-display: swap;
  src: url(polices/Onest-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215; }

@font-face { font-family: Playfair; font-weight: 400; font-display: swap;
  src: url(polices/PlayfairDisplay-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Playfair; font-weight: 400; font-display: swap;
  src: url(polices/PlayfairDisplay-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Playfair; font-weight: 400; font-display: swap;
  src: url(polices/PlayfairDisplay-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215; }

@font-face { font-family: Playfair; font-weight: 700; font-display: swap;
  src: url(polices/PlayfairDisplay-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Playfair; font-weight: 700; font-display: swap;
  src: url(polices/PlayfairDisplay-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Playfair; font-weight: 700; font-display: swap;
  src: url(polices/PlayfairDisplay-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215; }

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Règle E6 : la valeur de secours est écrite AVANT la moderne. Une police
     qui ne charge pas doit dégrader, pas rendre le texte invisible. */
  font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--encre);
  line-height: 1.55;
  /* Règle A7 : jamais de mise en majuscules globale — le cyrillique s'y prête
     mal et les majuscules accentuées françaises passent souvent mal. */
}

.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--filet);
}

.marque {
  font-family: Playfair, Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--prune);
}

.langues { display: flex; gap: .25rem; }

.langue {
  font: inherit;
  font-size: .8rem;
  padding: .3rem .7rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: transparent;
  color: var(--prune);
  cursor: pointer;
}
.langue[aria-pressed="true"] { background: var(--prune); color: var(--fond); border-color: var(--prune); }

.onglets {
  display: flex;
  gap: .5rem;
  /* Règle A5 : le russe fait 10 à 30 % de caractères en plus. Aucune largeur
     fixe, et on autorise le retour à la ligne plutôt que la troncature. */
  flex-wrap: wrap;
  padding: .75rem 1.25rem;
  font-size: .9rem;
  color: var(--prune);
  border-bottom: 1px solid var(--filet);
}
.onglets span { padding: .15rem .1rem; }

main { padding: 1.25rem; display: grid; gap: 1rem; max-width: 34rem; }

.carte {
  background: #FFFDFA;
  border: 1px solid var(--filet);
  border-radius: 14px;          /* angles ronds : grammaire côté cliente */
  padding: 1.1rem 1.2rem;
}

.carte h2 {
  font-family: Playfair, Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--prune);
  margin: 0 0 .5rem;
}

.doux { color: var(--rose); margin: 0; }
.date { margin: .6rem 0 0; font-size: .85rem; color: var(--prune); }

.questions, .pluriels { margin: 0; padding-left: 1.1rem; }
.questions li, .pluriels li { margin: .15rem 0; }

.bouton {
  font: inherit;
  font-weight: 500;
  margin-top: .9rem;
  padding: .6rem 1.2rem;
  min-height: 44px;             /* cible tactile, pas une largeur fixe (A5) */
  border: none;
  border-radius: 999px;
  background: var(--vin);
  color: #fff;
  cursor: pointer;
}

.pied { padding: 1.5rem 1.25rem 2.5rem; }
.version {
  font-size: .75rem;
  color: var(--prune);
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

/* Ne s'affiche que si verifierPluriels() trouve un trou. Rouge et lisible :
   une alerte discrète est une alerte qu'on ne voit pas. */
.alerte {
  margin: .8rem 0 0;
  padding: .5rem .7rem;
  border-left: 3px solid var(--vin);
  background: #FBF0F2;
  color: var(--vin);
  font-size: .8rem;
}

/* Bandeau de mise à jour en attente. Discret, sans bouton, ne recouvre rien
   d'important : il informe, il n'interrompt pas (E1). Posé au-dessus du pied
   de page plutôt qu'en surimpression, pour ne jamais masquer un champ de
   saisie sur un petit écran. */
.maj {
  margin: 0 1.25rem;
  padding: .55rem .8rem;
  border: 1px solid var(--filet);
  border-radius: 10px;
  background: #FFFDFA;
  color: var(--prune);
  font-size: .78rem;
}