/* ==========================================================================
   Base commune à toutes les pages : couleurs, polices, boutons, en-tête,
   pied de page. Chargée avant les feuilles propres à chaque type de page
   (accueil.css, pages.css, legal.css).
   ========================================================================== */

:root {
  --vanille: #F7F8EF;
  --blanc: #fff;
  --pistache: #B9CC96;
  --pistache-fonce: #4F6B3A;
  --framboise: #B5294E;
  --framboise-fonce: #961F40;
  --rose: #F4DADD;
  --sable: #E8D3AE;
  --chocolat: #2E1B16;
  --doux: #5A463F;

  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --largeur: 1120px;
}

/* Réinitialisation */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--vanille);
  color: var(--chocolat);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--framboise); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: min(var(--largeur), 100% - 3rem); margin-inline: auto; }

/* Titres (les tailles sont définies dans la feuille de chaque type de page) */
h1, h2, h3 { font-family: var(--titre); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

/* Lien dans un texte */
.lien-texte { color: var(--framboise); text-underline-offset: 3px; }

/* Boutons */
.bouton {
  display: inline-block;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid var(--framboise);
  background: var(--framboise);
  color: #fff;
  transition: background-color .2s, color .2s;
  cursor: pointer;
  font-family: inherit;
}
.bouton:hover { background: var(--framboise-fonce); border-color: var(--framboise-fonce); }
.bouton.contour { background: transparent; color: var(--framboise); }
.bouton.contour:hover { background: var(--framboise); color: #fff; }
.bouton.grand { padding: .85rem 1.7rem; font-size: 1rem; }

/* En-tête */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247, 248, 239, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(46, 27, 22, .1);
}
.entete { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .9rem 0; flex-wrap: wrap; }
.logo { font-family: var(--titre); font-size: 1.35rem; font-weight: 500; text-decoration: none; letter-spacing: -0.01em; }
nav.principale ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
nav.principale a { text-decoration: none; font-weight: 500; font-size: .98rem; padding: .25rem 0; border-bottom: 2px solid transparent; }
nav.principale a:hover { border-bottom-color: var(--framboise); }

/* Pied de page */
footer { background: #231410; color: rgba(255, 255, 255, .65); padding: 1.8rem 0; font-size: .92rem; }
footer .conteneur { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; flex-wrap: wrap; }
footer a { text-underline-offset: 3px; }

/* Mobile */
@media (max-width: 860px) {
  nav.principale { order: 3; width: 100%; overflow-x: auto; }
  nav.principale ul { gap: 1.25rem; white-space: nowrap; padding-bottom: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}