/* ═══════════════════════════════
   INTRO
═══════════════════════════════ */
.intro {
  height: 100dvh; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
}

/* Radial gold atmosphere */
.intro::before {
  content: '';
  position: absolute;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(212,168,67,0.08) 0%, rgba(184,134,11,0.04) 40%, transparent 70%);
  border-radius: 50%;
  animation: breathe 6s ease-in-out infinite;
}

.intro-content {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The AURUM wordmark */
.wordmark {
  font-style: italic;
  font-weight: 300;
  font-family: 'Cinzel', serif;
  font-size: clamp(72px, 14vw, 160px);

  line-height: 1;
  background: linear-gradient(
    135deg,
    #8B6408 0%,
    #C9940A 18%,
    #FFE566 32%,
    #FFD700 40%,
    #E8C040 50%,
    #FFD700 58%,
    #C9940A 72%,
    #8B6408 85%,
    #D4A843 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldFlow 5s ease-in-out infinite, fadeIn 2s ease forwards;
  opacity: 0;
  text-shadow: none;
  filter: drop-shadow(0 0 40px rgba(212,168,67,0.15));
}
.wordmark {
  display: flex;
  flex-direction: column;
  gap: 0; /* ou ajuste ici */
}
.wordmark-signed {
  font-family: "Great Vibes", cursive;
  font-style: italic;
  font-weight: 300;
  font-size: 0.45em;
  letter-spacing: 0.15em;
  line-height:1.3;
}
.wordmark-sub {
  font-family: 'Cinzel', serif;
  font-size: clamp(9px, 1.2vw, 12px);
  letter-spacing: 0.55em;
  color: var(--g3);
  text-transform: uppercase;
  margin-top: 16px;
  animation: fadeIn 2s ease 0.6s forwards;
  opacity: 0;
}

.intro-rule {
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, transparent, var(--g2), transparent);
  margin: 32px auto;
  animation: lineGrow 1.5s ease 0.8s forwards;
}

.slogan-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(16px, 2.5vw, 26px);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--text-mid);
  animation: fadeIn 2s ease 1.2s forwards;
  opacity: 0;
}

.slogan-main em {
  color: var(--g2);
  font-style: italic;
}

.scroll-hint {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: fadeIn 2s ease 2s forwards;
  opacity: 0;
}

.scroll-hint span {
  font-family: 'Cinzel', serif;
  font-size:clamp(10px,1vw,12px);
  letter-spacing: 0.4em;
  color: var(--g4);
  text-transform: uppercase;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--g3), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@media (max-width: 768px) {
  .logo-grid { grid-template-columns: 1fr; }
  .identity-grid { grid-template-columns: 1fr; gap: 40px; }
  .logo-cell { min-height: 280px; padding: 60px 32px; }
}


/* ── SVG AU-DESSUS du titre ── */
.madeleine-logo {
  width: clamp(120px, 22vw, 200px);
  height: clamp(120px, 22vw, 200px);
  overflow: visible;
}

.madeleine-logo path,
.madeleine-logo ellipse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Chaque trait se dessine en séquence */
/* ellipse base — le contour de la madeleine */
.madeleine-logo .s0 {
  stroke: url(#g1); stroke-width: 1.4;
  animation: draw 1.4s cubic-bezier(0.4,0,0.2,1) 0.2s both;
}
/* grand arc du dessus */
.madeleine-logo .s1 {
  stroke: url(#g1); stroke-width: 1.8;
  animation: draw 1.0s cubic-bezier(0.4,0,0.2,1) 1.4s both;
}
/* arcs internes — se dessinent plus vite, comme des hachures rapides */
.madeleine-logo .s2 {
  stroke: url(#g1); stroke-width: 1.0; opacity: 0.55;
  animation: draw 0.6s cubic-bezier(0.4,0,0.2,1) 2.2s both;
}
.madeleine-logo .s3 {
  stroke: url(#g1); stroke-width: 0.8; opacity: 0.38;
  animation: draw 0.5s cubic-bezier(0.4,0,0.2,1) 2.7s both;
}
.madeleine-logo .s4 {
  stroke: url(#g1); stroke-width: 0.6; opacity: 0.26;
  animation: draw 0.4s cubic-bezier(0.4,0,0.2,1) 3.1s both;
}
/* épis de blé — dessinés un par un */
.madeleine-logo .s5 {
  stroke: url(#g1); stroke-width: 1.2; opacity: 0.75;
  animation: draw 0.45s cubic-bezier(0.4,0,0.2,1) 3.4s both;
}
.madeleine-logo .s6 {
  stroke: url(#g1); stroke-width: 1.2; opacity: 0.75;
  animation: draw 0.45s cubic-bezier(0.4,0,0.2,1) 3.75s both;
}
.madeleine-logo .s7 {
  stroke: url(#g1); stroke-width: 1.2; opacity: 0.75;
  animation: draw 0.45s cubic-bezier(0.4,0,0.2,1) 4.1s both;
}
.madeleine-logo .s8 {
  stroke: url(#g1); stroke-width: 1.2; opacity: 0.75;
  animation: draw 0.45s cubic-bezier(0.4,0,0.2,1) 4.45s both;
}


/* Section about */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  margin: 0 auto; 
  padding:clamp(60px,10vh,120px) clamp(24px,5vw,80px);
}
@media (max-width: 768px) {
	.about {
	  padding: 60px 0; 
	}
}
.about::before {
  content: '';
  position: absolute;
  left: 50%; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(212,168,67,0.18), transparent);
  transform: translateX(-50%);
}

/* ════════ GAUCHE : texte ════════ */
.wrap-left {
  padding: clamp(60px,8vw,120px) clamp(40px,5vw,90px) clamp(60px,8vw,120px) clamp(40px,5vw,90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 22px);
  color: var(--g5);
  line-height: 1.65;
  border-left: 1px solid rgba(212,168,67,0.22);
  padding-left: 24px;
  margin: clamp(17px, 1.9vw, 22px) 0;
}

/* ════════ DROITE : SVG ════════ */
.wrap-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 60px 0px 60px 40px;
}

.wrap-right::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(212,168,67,0.055) 0%, transparent 68%);
  border-radius: 50%;
  animation: breathe 7s ease-in-out infinite;
}

/* ── Le SVG chapeau ── */
.chef-hat {
  width: clamp(320px, 35vw, 520px);
  height: clamp(320px, 35vw, 520px);
  position: relative;
  z-index: 2;
  overflow: visible;
}

.chef-hat path,
.chef-hat ellipse {
  fill: none;
  stroke: url(#gh);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* bande — traits épais */
.chef-hat .h0  { stroke-width: 3.2; }
/* côtés cylindre */
.chef-hat .h1  { stroke-width: 1.6; }
.chef-hat .h2  { stroke-width: 1.6; }
/* bouffant ext */
.chef-hat .h3  { stroke-width: 1.5; }
/* bouffant int */
.chef-hat .h4  { stroke-width: 1.0; opacity: .55; }
/* plateau sommet */
.chef-hat .h5  { stroke-width: 1.1; }
/* 9 plis principaux */
.chef-hat .h6,
.chef-hat .h7,
.chef-hat .h8,
.chef-hat .h9,
.chef-hat .h10,
.chef-hat .h11,
.chef-hat .h12,
.chef-hat .h13,
.chef-hat .h14 { stroke-width: 0.8; opacity: .55; }
/* 8 plis secondaires */
.chef-hat .h15,
.chef-hat .h16,
.chef-hat .h17,
.chef-hat .h18,
.chef-hat .h19,
.chef-hat .h20,
.chef-hat .h21,
.chef-hat .h22 { stroke-width: 0.5; opacity: .3; }
/* coutures bande */
.chef-hat .h23 { stroke-width: 2.4; opacity: .7; }
.chef-hat .h24 { stroke-width: 1.2; opacity: .35; }
/* ellipse bas */
.chef-hat .h25 { stroke-width: 2.0; opacity: .6; }

/* Animations — actives uniquement après scroll (.animate ajouté par JS) */
.chef-hat.animate .h0  { animation: draw 1.1s cubic-bezier(.4,0,.2,1) 0.1s  both; }
.chef-hat.animate .h1  { animation: draw 0.7s cubic-bezier(.4,0,.2,1) 1.0s  both; }
.chef-hat.animate .h2  { animation: draw 0.7s cubic-bezier(.4,0,.2,1) 1.5s  both; }
.chef-hat.animate .h3  { animation: draw 1.8s cubic-bezier(.4,0,.2,1) 2.0s  both; }
.chef-hat.animate .h4  { animation: draw 1.4s cubic-bezier(.4,0,.2,1) 3.6s  both; }
.chef-hat.animate .h5  { animation: draw 0.7s cubic-bezier(.4,0,.2,1) 4.8s  both; }
.chef-hat.animate .h6  { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 5.40s both; }
.chef-hat.animate .h7  { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 5.65s both; }
.chef-hat.animate .h8  { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 5.90s both; }
.chef-hat.animate .h9  { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 6.15s both; }
.chef-hat.animate .h10 { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 6.40s both; }
.chef-hat.animate .h11 { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 6.65s both; }
.chef-hat.animate .h12 { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 6.90s both; }
.chef-hat.animate .h13 { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 7.15s both; }
.chef-hat.animate .h14 { animation: draw 0.55s cubic-bezier(.4,0,.2,1) 7.40s both; }
.chef-hat.animate .h15 { animation: draw 0.4s cubic-bezier(.4,0,.2,1) 7.65s  both; }
.chef-hat.animate .h16 { animation: draw 0.4s cubic-bezier(.4,0,.2,1) 7.80s  both; }
.chef-hat.animate .h17 { animation: draw 0.4s cubic-bezier(.4,0,.2,1) 7.95s  both; }
.chef-hat.animate .h18 { animation: draw 0.4s cubic-bezier(.4,0,.2,1) 8.10s  both; }
.chef-hat.animate .h19 { animation: draw 0.4s cubic-bezier(.4,0,.2,1) 8.25s  both; }
.chef-hat.animate .h20 { animation: draw 0.4s cubic-bezier(.4,0,.2,1) 8.40s  both; }
.chef-hat.animate .h21 { animation: draw 0.4s cubic-bezier(.4,0,.2,1) 8.55s  both; }
.chef-hat.animate .h22 { animation: draw 0.4s cubic-bezier(.4,0,.2,1) 8.70s  both; }
.chef-hat.animate .h23 { animation: draw 0.6s cubic-bezier(.4,0,.2,1) 8.85s  both; }
.chef-hat.animate .h24 { animation: draw 0.5s cubic-bezier(.4,0,.2,1) 9.10s  both; }
.chef-hat.animate .h25 { animation: draw 0.8s cubic-bezier(.4,0,.2,1) 9.40s  both; }

@media (max-width: 768px) {
  .about { grid-template-columns:1fr; }
  .about::before { display:none; }
  .wrap-right { order:-1; padding:60px 32px 32px; }
  .wrap-left  { padding:32px 32px 80px; }
}


/* ══ HIGHLIGHTS ══ */
.hl-section{
  background:var(--bg-section);
  padding:clamp(60px,8vh,100px) clamp(24px,5vw,80px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(48px,6vh,72px);
}

.hl-header{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* ── Grille ── */
.hl-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
/*   max-width:1900px; */
}

.hl-item{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:0 clamp(20px,3vw,40px);
  position:relative;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease,transform .6s ease;
}
.hl-item.visible{
  opacity:1;
  transform:translateY(0);
}
.hl-item:nth-child(2){transition-delay:.1s;}
.hl-item:nth-child(3){transition-delay:.2s;}
.hl-item:nth-child(4){transition-delay:.3s;}

/* Séparateur vertical */
.hl-item+.hl-item::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(212,168,67,.2) 30%,rgba(212,168,67,.2) 70%,transparent);
}

/* Numéro outline */
.hl-num{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(52px,6vw,80px);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(212,168,67,.25);
  letter-spacing:-.02em;
  user-select:none;
  transition:-webkit-text-stroke .3s ease;
}

/* Ligne décorative */
.hl-line{
  width:28px;
  height:1px;
  background:linear-gradient(to right,var(--g2),transparent);
  margin-top:-8px;
  transition:width .35s ease,background .35s ease;
}

.hl-item-title{
  font-family:'Cinzel',serif;
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.3em;
  color:var(--g3);
  text-transform:uppercase;
  line-height:1.5;
  transition:color .3s ease;
}

.hl-item-text{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(14px,1.4vw,16px);
  line-height:1.85;
  color:var(--text);
}

/* État allumé — appliqué par JS */
.hl-num.lit {
  -webkit-text-stroke: 1px rgba(212,168,67,0.9);
  text-shadow:
    0 0 20px rgba(212,168,67,0.35),
    0 0 40px rgba(212,168,67,0.15);
  transition: -webkit-text-stroke 0.4s ease, text-shadow 0.4s ease;
}

/* État éteint — retour smooth */
.hl-num {
  transition: -webkit-text-stroke 0.6s ease, text-shadow 0.6s ease;
}

/* Ligne qui s'élargit quand le numéro est lit */
.hl-item.lit .hl-line {
  width: 52px;
  background: linear-gradient(to right, var(--g2), var(--g4), transparent);
  transition: width 0.4s ease, background 0.4s ease;
}

/* ── Responsive ── */
@media(max-width:760px){
  .hl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 0;}
  .hl-item:nth-child(3)::before,
  .hl-item:nth-child(1)::before{display:none;}
  .hl-item:nth-child(3),
  .hl-item:nth-child(4){border-top:1px solid rgba(212,168,67,.1);padding-top:40px;}
}
@media(max-width:480px){
  .hl-grid{grid-template-columns:1fr;gap:40px;}
  .hl-item+.hl-item::before{display:none;}
  .hl-item:nth-child(n){border-top:1px solid rgba(212,168,67,.1);padding-top:40px;}
  .hl-item:first-child{border-top:none;padding-top:0;}
}