/*
  site.css — Cabinet Julie Guillot · direction "Éditorial apaisé" (argile & papier).
  Design distinctif (skill frontend-design) appliqué UNIQUEMENT ici : variables de
  thème Bootstrap, styles sur classes/ids existants, fonts, fonds, motion. AUCUNE
  classe custom dans le balisage. Versionné via ?v= dans le <link>.
  Voulu DIFFÉRENT des autres sites : typo serif éditoriale, palette argile chaude,
  hero clair (pas de dégradé), mises en page en bandes — pas d'onglets/carrousel.
*/

:root {
  --bs-primary: #B05C44;
  --bs-primary-rgb: 176, 92, 68;
  --bs-secondary: #463F39;
  --bs-secondary-rgb: 70, 63, 57;
  --bs-link-color: #A1503A;
  --bs-link-color-rgb: 161, 80, 58;
  --bs-link-hover-color: #8a4231;
  --bs-border-radius: .4rem;
  --bs-border-radius-lg: .5rem;
  --bs-body-bg: #FBF7F1;
  --bs-body-color: #2A2622;
  --bs-body-font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --jg-clay: #B05C44;
  --jg-ink: #2A2622;
  --jg-ochre: #C9A86A;
  --jg-paper: #FBF7F1;
  --jg-stone: #463F39;
}

body {
  color: #2A2622;
  background-color: #FBF7F1;
}

/* Typographie éditoriale : grand serif Cormorant + Work Sans. */
h1, .display-1, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  letter-spacing: .005em;
}
h2, h3, h4, h5, .navbar-brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}
.lead, .blockquote { font-family: "Cormorant Garamond", Georgia, serif; }
.navbar-brand { font-size: 1.45rem; }

/* Boutons sur la charte argile. */
.btn-primary {
  --bs-btn-bg: var(--jg-clay);
  --bs-btn-border-color: var(--jg-clay);
  --bs-btn-hover-bg: #99492f;
  --bs-btn-hover-border-color: #99492f;
  --bs-btn-active-bg: #99492f;
  --bs-btn-active-border-color: #99492f;
}
.btn-warning {
  --bs-btn-bg: var(--jg-ochre);
  --bs-btn-border-color: var(--jg-ochre);
  --bs-btn-hover-bg: #b8964f;
  --bs-btn-hover-border-color: #b8964f;
  --bs-btn-color: #2A2622;
  --bs-btn-hover-color: #2A2622;
}
.btn-outline-primary {
  --bs-btn-color: var(--jg-clay);
  --bs-btn-border-color: var(--jg-clay);
  --bs-btn-hover-bg: var(--jg-clay);
  --bs-btn-hover-border-color: var(--jg-clay);
}
.text-primary { color: var(--jg-clay) !important; }
.bg-primary { background-color: var(--jg-clay) !important; }
.badge.text-bg-primary { background-color: var(--jg-clay) !important; }
.bg-light { background-color: #F2EBE0 !important; }
.bg-dark { background-color: var(--jg-ink) !important; }
.navbar-brand strong { color: var(--jg-clay); }

/* Hero clair "papier" (pas de dégradé) + filet ocre. */
#hero {
  background-color: #F4ECDF;
  border-bottom: 3px solid var(--jg-ochre);
}
#hero, #hero .text-white, #hero .text-white-50 { color: #2A2622 !important; }

/* Citation de présentation en exergue. */
.blockquote {
  border-left: 3px solid var(--jg-ochre);
  padding-left: 1.25rem;
  font-style: italic;
  font-size: 1.35rem;
}

/* Grands numéros des principes (éléments existants stylés, pas de classe custom). */
.display-3 { line-height: 1; }

/* Cartes sobres. */
.card { border-radius: var(--bs-border-radius-lg); transition: box-shadow .2s ease; }
.card:hover { box-shadow: 0 .6rem 1.6rem rgba(70, 63, 57, .12); }

/* Tableaux de tarifs lisibles. */
.table > :not(caption) > * > * { padding: .7rem 1rem; }

/* Bloc texte SEO placé haut dans le DOM, rendu visuellement en bas (order-last). */
main.d-flex > section { order: 0; }

/* Motion : apparition douce des sections au chargement (CSS only). */
@media (prefers-reduced-motion: no-preference) {
  main > section { animation: jgFade .5s ease both; }
  main > section:nth-of-type(2) { animation-delay: .05s; }
  main > section:nth-of-type(3) { animation-delay: .10s; }
  main > section:nth-of-type(4) { animation-delay: .15s; }
}
@keyframes jgFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }