/* Design system, Une vie plus grande. Angélique Robin.
   Feuille commune à toutes les pages : les couleurs se changent ici. */

:root {
  /* Palette. Aucune autre couleur ne doit être introduite. */
  --vert-nuit: #212B13;      /* texte uniquement, jamais un fond */
  --vert-profond: #3A4D22;   /* couleur principale, fonds et boutons sur clair */
  --sauge: #899273;          /* fond de section et touches */
  --jaune: #FBF1BC;          /* accent, titres sur vert sombre, texte des boutons */
  --aura: #BAAFDE;           /* accent, fond de section et aplats */
  --creme: #F0ECE2;          /* le papier, fond de page */
  --blanc: #FFFFFF;          /* joker, texte sur vert sombre */

  /* Alias utilisés par les pages existantes */
  --ink: var(--vert-nuit);
  --encre: var(--vert-nuit);

  /* Typographie */
  --titre: 'Playfair Display', Georgia, serif;
  --texte: 'Anonymous Pro', ui-monospace, monospace;
}

html { background: var(--creme); }
body { background: var(--creme); color: var(--vert-nuit); }

/* Titres : romain 600, l'italique ne sert qu'à mettre en valeur */
h1.lead, h2.lead { font-weight: 600; }

/* Label de section : filet de 44 x 4 px, puis texte entre crochets */
.label {
  --filet: var(--sauge);
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--vert-profond);
}
.label::before {
  content: "[\00a0";
  padding-left: 60px;
  background: linear-gradient(var(--filet), var(--filet)) left center / 44px 4px no-repeat;
}
.label::after { content: "\00a0]"; }

/* Boutons. Jamais de contour, jamais de coins arrondis, jamais d'ombre. */
.btn {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0.22em;
  min-height: 56px;
  background: var(--aura);
  color: var(--jaune);
  font-weight: 700;
}
/* Sur vert profond et sur indigo, le bouton passe en jaune beurre */
.btn--clair, :is(.fond-vert, .fond-aura) .btn { background: var(--jaune) !important; color: var(--vert-nuit) !important; font-weight: 400 !important; }

/* Fonds de section */
.fond-vert { background: var(--vert-profond); color: var(--blanc); }
.fond-vert .label { color: var(--jaune); --filet: var(--jaune); }
.fond-sauge { background: var(--sauge); color: var(--vert-nuit); }
.fond-sauge .label { color: var(--jaune); --filet: var(--jaune); }
.fond-aura { background: var(--aura); color: var(--vert-nuit); }
.fond-aura .label { color: var(--jaune); --filet: var(--jaune); }

/* Carte posée sur un fond coloré : crème, bandeau supérieur de 10 px */
.carte { background: var(--creme); border-top: 10px solid var(--bandeau, var(--vert-profond)); }

/* Témoignage : un filet jaune, pas un encart */
.temoignage { background: none !important; border-left: 4px solid var(--jaune); padding: 0 0 0 28px !important; }

/* Champ de formulaire : une ligne, pas une boîte */
.champ { border: none !important; border-bottom: 2px solid currentColor !important; border-radius: 0; background: none; }

/* Texte courant : une seule taille partout (hors pied de page) */
.body:not(footer *) { font-size: 15px !important; line-height: 1.85; }

/* Sur sauge et sur aura, tout le texte courant passe en vert nuit (lisibilité) */
.fond-aura :is(p, li, h1, h2, h3, blockquote, figcaption, .num, .lead) { color: var(--vert-nuit) !important; }
/* Sur sauge : titres et chiffres jaune beurre, texte blanc (choix d'Angélique) */
.fond-sauge :is(h1, h2, h3, .lead, .num) { color: var(--jaune) !important; }
.fond-sauge :is(p, li, blockquote, figcaption) { color: var(--blanc) !important; }
.fond-sauge li::before { color: var(--jaune) !important; }
.fond-aura :is(p, li) a:not(.btn) { color: inherit; }
.fond-sauge :is(p, li) a:not(.btn) { color: var(--jaune); }

/* Sur vert profond : titres jaune beurre, texte blanc, labels indigo */
.fond-vert :is(h1, h2, h3, .lead, .num) { color: var(--jaune) !important; }
.fond-vert :is(p, li, blockquote, figcaption) { color: var(--blanc) !important; }
.fond-vert :is(p, li) a:not(.btn) { color: var(--jaune); }

/* Sur indigo aura : titres en jaune beurre (choix d'Angélique), sauf dans les cartes crème */
.fond-aura :is(h1, h2, h3, .lead):not(.carte *) { color: var(--jaune) !important; }

/* Sur vert profond : boutons en indigo aura, texte jaune (choix d'Angélique) */
.fond-vert .btn:not(footer *) { background: var(--aura) !important; color: var(--jaune) !important; font-weight: 700 !important; }

/* Pied de page : titres de colonnes en jaune beurre */
footer .kicker { color: var(--jaune) !important; }
.fond-vert li::before { color: var(--jaune) !important; }