/* Styles spécifiques à la page d'accueil */

h1, h2, h3 {
  font-family: var(--font-accent);
  line-height: 1.3;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.8rem); }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }

.label-section {
  font-family: var(--font-titre);
  font-size: var(--size-xl);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: var(--space-md);
  line-height: 1.1;
}
.label-olive  { color: var(--color-olive); }
.label-corail { color: var(--color-corail); }
.label-bleu   { color: var(--color-bleu); }

/* Navigation */
.nav {
  background-color: var(--color-creme);
  border-bottom: 1px solid color-mix(in srgb, var(--color-fonce) 10%, transparent);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.nav-logo img { height: 80px; width: auto; }
.nav-liens { display: flex; align-items: center; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.nav-liens a { font-size: var(--size-sm); color: var(--color-fonce); text-decoration: none; font-weight: 500; letter-spacing: 0.02em; }
.nav-liens a:not(.btn):hover { color: var(--color-corail); }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: var(--space-sm); color: var(--color-fonce); font-size: 1.4rem; line-height: 1; }

/* Hero */
.hero-accueil { padding: var(--space-4xl) var(--space-xl); text-align: center; position: relative; overflow: hidden; }
.hero-carte { background: var(--color-creme); border-radius: var(--radius-xl); padding: var(--space-3xl); max-width: 820px; margin: 0 auto; box-shadow: 0 4px 32px rgba(0,0,0,0.10); }
.hero-titre-principal { color: var(--color-fonce); margin: 0 auto var(--space-lg); max-width: 860px; }
.hero-titre-principal em { font-style: normal; color: var(--color-corail); }
.hero-sous-titre { font-size: var(--size-lg); color: #555; max-width: 620px; margin: 0 auto var(--space-xl); line-height: 1.65; }
.hero-btns { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.hero-micro { font-size: var(--size-sm); color: #999; margin-top: var(--space-lg); font-style: italic; }

/* Séparateurs */
.sep-organique { text-align: center; padding: var(--space-sm) 0; line-height: 0; overflow: hidden; }
.sep-organique img { width: clamp(180px, 40%, 380px); opacity: 0.4; margin: 0 auto; }
.sep-organique.large img { width: clamp(260px, 65%, 600px); opacity: 0.3; }

/* Section problème */
.section-probleme { background-color: var(--color-fonce); color: white; padding: var(--space-4xl) var(--space-xl); text-align: center; }
.section-probleme h2 { color: white; max-width: 800px; margin: 0 auto var(--space-2xl); }
.section-probleme h2 em { font-style: normal; color: var(--color-ocre); }
.section-probleme p { font-size: var(--size-md); color: rgba(255,255,255,0.78); max-width: 640px; margin: 0 auto; line-height: 1.7; }
.section-probleme strong { color: white; }

/* Section approche */
.Approche-intro { text-align: center; max-width: 620px; margin: 0 auto var(--space-3xl); background: white; border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-2xl); box-shadow: var(--shadow-sm); }
.Approche-intro h2 { color: var(--color-fonce); margin-bottom: var(--space-md); }
.Approche-intro p { color: #555; font-size: var(--size-md); line-height: 1.65; }
.grille-piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-lg); max-width: var(--max-width); margin: 0 auto; }
@media (min-width: 900px) { .grille-piliers { grid-template-columns: repeat(5, 1fr); } }
.pilier-carte { background: white; border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-md); }
.pilier-numero { font-family: var(--font-accent); font-size: var(--size-2xl); color: var(--color-olive); line-height: 1; }
.pilier-texte { font-size: var(--size-base); color: var(--color-fonce); line-height: 1.55; font-weight: 500; margin-bottom: 0; }

/* Section Claude & moi */
.claude-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-3xl); align-items: center; max-width: var(--max-width); margin: 0 auto; }
.claude-visuel { background: color-mix(in srgb, var(--color-bleu) 12%, white); border-radius: var(--radius-xl); aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-xl); box-shadow: var(--shadow-md); }
.claude-sous-titre { font-size: var(--size-lg); color: var(--color-bleu); font-weight: 600; margin-bottom: var(--space-xl); line-height: 1.4; }
.claude-contenu p { color: #444; font-size: var(--size-base); line-height: 1.7; margin-bottom: var(--space-lg); }
.claude-badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }

/* Section Geneviève */
.genevieve-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-3xl); align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); }
.genevieve-visuel { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 3/4; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2xl); text-align: center; }
.genevieve-texte h2 { color: var(--color-fonce); margin-bottom: var(--space-lg); }
.genevieve-texte p { font-size: var(--size-base); color: #444; line-height: 1.7; margin-bottom: var(--space-lg); }

/* Infolettre */
.infolettre-grande { padding: var(--space-4xl) var(--space-xl); text-align: center; }
.infolettre-grande-inner { background: var(--color-creme); border-radius: var(--radius-xl); padding: var(--space-3xl); max-width: 640px; margin: 0 auto; box-shadow: var(--shadow-md); }
.infolettre-grande h2 { color: var(--color-fonce); margin-bottom: var(--space-md); }
.infolettre-grande p { color: #555; font-size: var(--size-md); line-height: 1.65; margin-bottom: var(--space-xl); }
.infolettre-liste { list-style: none; padding: 0; text-align: left; display: inline-block; margin-bottom: var(--space-2xl); }
.infolettre-liste li { font-size: var(--size-base); color: #444; padding: var(--space-xs) 0; display: flex; align-items: baseline; gap: var(--space-sm); }
.infolettre-liste li::before { content: '✦'; color: var(--color-corail); font-size: 0.7em; flex-shrink: 0; }
.infolettre-note { font-size: var(--size-xs); color: rgba(0,0,0,0.4); font-style: italic; margin-top: var(--space-md); margin-bottom: 0; }

/* Nav finale */
.nav-finale-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); max-width: 860px; margin: 0 auto; }
.nav-finale-carte { background: white; border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.nav-finale-carte .btn { margin-top: auto; width: 100%; }
.nav-finale-icone { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-finale-icone img { width: 38px; height: 38px; object-fit: contain; }
.nav-finale-carte h3 { color: var(--color-fonce); line-height: 1.3; }
.nav-finale-carte p { font-size: var(--size-sm); color: #666; margin-bottom: 0; }

/* Footer */
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); text-align: center; }
.footer-logo { font-family: var(--font-titre); font-size: var(--size-2xl); color: white; margin-bottom: var(--space-xs); }
.footer-slogan { font-size: var(--size-sm); color: rgba(255,255,255,0.55); margin-bottom: var(--space-2xl); }
.footer-liens { display: flex; gap: var(--space-xl); justify-content: center; margin-bottom: var(--space-xl); flex-wrap: wrap; }
.footer-liens a { color: color-mix(in srgb, var(--color-rose) 80%, white); font-size: var(--size-sm); text-decoration: none; }
.footer-liens a:hover { text-decoration: underline; }
.footer-copy { font-size: var(--size-xs); color: rgba(255,255,255,0.3); margin-bottom: 0; }
.footer-copy a { color: rgba(255,255,255,0.3); }

/* Patterns */
.section-pattern { background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-pattern-patchwork-colore   { background-image: url('/public/assets/patterns/pattern-patchwork-colore-v1.webp'); }
.section-pattern-carreaux-fins      { background-image: url('/public/assets/patterns/pattern-carreaux-fins-v1.webp'); }
.section-pattern-ronds-superposes   { background-image: url('/public/assets/patterns/pattern-ronds-superposes-v1.webp'); }
.section-pattern-vagues-multicolores{ background-image: url('/public/assets/patterns/pattern-vagues-multicolores-v1.webp'); }

/* Responsive */
@media (max-width: 768px) {
  .nav-hamburger { display: block; }
  .nav-liens { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding: var(--space-lg) 0 var(--space-md); border-top: 1px solid rgba(0,0,0,0.08); margin-top: var(--space-sm); gap: var(--space-md); }
  .nav-liens.nav-ouvert { display: flex; }
  .claude-inner { grid-template-columns: 1fr; }
  .claude-visuel { aspect-ratio: 16/9; }
  .genevieve-inner { grid-template-columns: 1fr; }
  .genevieve-visuel { aspect-ratio: 1; max-width: 260px; margin: 0 auto; }
  .infolettre-grande-inner { padding: var(--space-2xl) var(--space-xl); }
}