@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* RESET */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

:root {
  /* COLORS */
  --color-bg: #fafafa;
  --color-bg-primary: #f1eee1;
  --color-primary: #B8961E;
  --color-primary-hover: #9e8119;
  --color-text-heading: #111111;
  --color-text-primary: #222222;
  --color-text-secondary: #555555;
  --color-text-muted: #777777;

  --gray-100: #e4e4e4;
  --gray-200: #a0a0a0;
  --gray-300: #555555;

  /* TYPOGRAPHY */
  --font-sans: "Lato", sans-serif;
  --font-serif: "Playfair Display", serif;
  --title-xl: clamp(2.5rem, 2.25rem + 1.8vw, 3.5rem);
  --title-lg: clamp(1.75rem, 1.5rem + 1.8vw, 2.5rem);
  --title-md: clamp(1.625rem, 1.49rem + 0.68vw, 2rem);
  --title-sm: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  --text-body: clamp(1rem, 1rem + 0.1vw, 1.0625rem);
  --text-blockquote: clamp(1.125rem, 1rem + 0.23vw, 1.25rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);

  /* PADDING */
  --container-padding-mobile: 1.25rem;
  --container-padding-tablet: 2.5rem;
  --container-padding-desktop: 3rem;

  /* SPACING */
  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  
  /* Largeur maximale du contenu */
  --container-max-width: 800px;
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a,
a:visited,
a:active {
  font-family: var(--font-sans);
  text-decoration: none;
}

/* TYPOGRAPHY */
h1, h2, h3, h4 {
  color: var(--color-text-heading);
}

p {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
}

strong {
  font-weight: 600;
}

.title-xl,
.title-lg,
.title-md {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -.0015rem;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.title-xl {
  font-size: var(--title-xl);
  text-align: center;
}

.title-lg {
  font-size: var(--title-lg);
  margin-bottom: clamp(1rem, calc(.625rem + 1.8vw), 2rem);
}

.title-md {
  font-size: var(--title-md);
}

.text-lead {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
  .title-xl,
  .text-lead {
    text-align: left;
  }  
}

.text-body {
  color: var(--color-text-primary);
  font-size: var(--text-body);
  font-weight: 400;
}

.text-body p {
  margin-bottom: clamp(1rem, 0.78rem + 1.14vw, 1.625rem);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.link-items {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: clamp(1.5rem, calc(1.25rem + 1.4vw), 2.5rem);
}

.link-items:hover {
  color: var(--color-primary-hover);
}

.link-items:hover .link-icon {
  transform: translate3d(.25em,0,0);
}

.link-text,
.link-text-sm {
  color: var(--color-primary);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-text {
  font-size: clamp(1rem, 3vw, 1.125rem);
}

.link-text:hover {
  color: var(--color-primary-hover);
}

.link-icon {
  transition: .2s ease-in-out;
  padding-top: .125rem;
  font-size: clamp(1.125rem, 2vw, 1.25rem);
}

.blockquote {
  color: var(--color-text-heading);
  font-family: var(--font-sans);
  font-size: var(--text-blockquote);
  font-weight: 500;
  line-height: 1.5;
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid #B8961E;
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.blockquote.visible {
  transform: scale(1);
  opacity: 1;
}

.signature {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 2rem;
  font-style: normal;
}

.mt-0 {margin-top: var(--space-0);}
.mt-1 {margin-top: var(--space-1);}
.mt-2 {margin-top: var(--space-2);}
.mt-3 {margin-top: var(--space-3);}
.mt-4 {margin-top: var(--space-4);}
.mt-5 {margin-top: var(--space-5);}
.mt-6 {margin-top: var(--space-6);}

.mb-0 { margin-bottom: var(--space-0) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }