/* =====================================================================
   LE JARDIN D'ELIO — layout.css
   Structures : en-tête, pied de page, héros, sections, grilles.
   ===================================================================== */

/* ---------- Rythme des sections ---------- */
.section { padding-block: var(--space-2xl); position: relative; }
.section--tight { padding-block: var(--space-xl); }
.section--panel { background: var(--c-panel); }
.section--forest {
  background: var(--c-forest);
  color: var(--c-cream);
}
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--c-cream); }
.section--forest p { color: rgba(249,238,218,.86); }

.section__head { max-width: 62ch; margin-bottom: var(--space-l); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: var(--fw-black);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-leaf);
  margin-bottom: var(--space-xs);
}
.eyebrow::before {
  content: "";
  width: 1.6em; height: 2px;
  background: var(--c-gold);
  border-radius: 2px;
}
.section--forest .eyebrow { color: var(--c-gold-soft); }

.lead { font-size: var(--step-1); color: var(--text-muted); }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--c-cream) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.is-scrolled { box-shadow: var(--shadow-m); background: color-mix(in srgb, var(--c-cream) 96%, transparent); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 76px;
}
.nav__brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; }
.nav__brand img { width: auto; height: 52px; }
.nav__brand-text {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 1.25rem;
  color: var(--c-forest);
  line-height: 1;
}
.nav__brand-text i { color: var(--c-gold); font-style: italic; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.4rem, 1.5vw, 1.4rem);
  list-style: none;
  padding: 0; margin: 0;
}
.nav__link {
  display: inline-block;
  padding: .55em .2em;
  font-weight: var(--fw-bold);
  color: var(--c-forest);
  text-decoration: none;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: .1em;
  width: 100%; height: 2px;
  background: var(--c-gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-leaf); }

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--c-cream-soft);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block;
  width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--c-forest);
  transition: transform var(--t), opacity var(--t-fast);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -7px; }
.nav__toggle span::after  { position: absolute; top:  7px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Héros ---------- */
.hero { position: relative; padding-block: clamp(2.5rem, 5vw, 5rem) var(--space-2xl); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.hero__title { font-size: var(--step-hero); font-variation-settings: "opsz" 60, "SOFT" 40, "wght" 600; }
.hero__title .brand-elio { display: inline-block; }
.hero__tag { font-size: var(--step-1); color: var(--text-muted); margin-top: var(--space-s); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }

.hero__visual { position: relative; display: grid; place-items: center; }
.hero__logo {
  position: relative; z-index: 2;
  width: min(100%, 460px);
  filter: drop-shadow(0 24px 50px rgba(46,60,20,.22));
  border-radius: 50%;
}
/* Halo de rayons de soleil derrière le logo (signature) */
.hero__halo {
  position: absolute; inset: -6%;
  z-index: 1;
  background:
    conic-gradient(from 0deg,
      rgba(242,164,28,.0) 0deg, rgba(242,164,28,.28) 6deg, rgba(242,164,28,0) 12deg,
      rgba(242,164,28,0) 18deg, rgba(242,164,28,.28) 24deg, rgba(242,164,28,0) 30deg);
  background-size: 100% 100%;
  border-radius: 50%;
  mask: radial-gradient(circle, transparent 46%, #000 47%, #000 62%, transparent 66%);
  animation: spin 60s linear infinite;
}

.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--space-l);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.stat__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--c-leaf);
  font-variation-settings: "wght" 620;
  line-height: 1;
}
.stat__label { font-size: var(--step--1); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-bold); }

/* ---------- Frise Arts & Crafts (séparateur signature) ---------- */
.frieze {
  height: 46px;
  background-image: url("../assets/motifs/frise-border.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  opacity: .95;
}
.frieze--flip { transform: scaleY(-1); }

/* ---------- Grilles génériques ---------- */
.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Deux colonnes texte + média */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--c-forest);
  color: var(--c-cream);
  position: relative;
}
.site-footer a { color: var(--c-gold-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__frieze { transform: scaleY(-1); filter: saturate(1.05); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-l);
  padding-block: var(--space-xl);
}
.footer__brand img { height: 96px; width: auto; margin-bottom: var(--space-s); }
.footer__brand p { color: rgba(249,238,218,.8); font-size: var(--step--1); }
.footer h5 {
  font-family: var(--font-display);
  color: var(--c-gold-soft);
  font-size: var(--step-1);
  margin-bottom: var(--space-s);
}
.footer__list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer__bottom {
  border-top: 1px solid rgba(249,238,218,.16);
  padding-block: var(--space-m);
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  align-items: center; justify-content: space-between;
  font-size: var(--step--1);
  color: rgba(249,238,218,.72);
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb { padding-block: var(--space-m) 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; padding: 0; font-size: var(--step--1); font-weight: var(--fw-bold); }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: .6em; color: var(--line-strong); }
.breadcrumb a { text-decoration: none; color: var(--text-muted); }
.breadcrumb [aria-current="page"] { color: var(--c-leaf); }

/* ---------- En-tête de page interne ---------- */
.page-hero { padding-block: var(--space-l) var(--space-xl); position: relative; }
.page-hero__title { font-size: var(--step-4); }
.page-hero__lead { margin-top: var(--space-s); max-width: 60ch; }