/* ═══════════════════════════════
   Matière première
═══════════════════════════════ */
/* Section Origine */
.origine {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  margin: 0 auto; 
  padding:clamp(60px,12vw,120px) clamp(24px,5vw,80px);
}
@media (max-width: 768px) {
	.about {
	  padding: 60px 0; 
	}
}
.origine::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%);
}

@media (max-width: 768px) {
  .origine { grid-template-columns:1fr; }
  .origine::before { display:none; }
  .wrap-right { order:-1; padding:60px 32px 32px; }
  .wrap-left  { padding:32px 0 0 0!important; }
}
/* ════════ 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 : image fixe ════════ */
.wrap-right {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  min-height: 500px;
}

.origine-img {
  position: absolute;
  /* Dépasse en hauteur pour permettre le mouvement parallax */
  top: -20%;
  left: 0;
  right: 0;
  bottom: -20%;
  background-image: url('https://signe-madeleine.ca/wp-content/uploads/2026/04/madeleine-galerie-lafayette_le-gourmet.webp');
  background-size: cover;
  background-position: center center;
  will-change: transform;
  transition: transform .1s linear;
}

.origine-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(7,6,4,.6) 0%, rgba(7,6,4,.15) 40%, transparent 70%),
    linear-gradient(to bottom, rgba(7,6,4,.3) 0%, transparent 20%, transparent 80%, rgba(7,6,4,.3) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Coins — z-index au dessus de l'image */
.img-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 3;
}
.img-corner svg { width: 100%; height: 100%; }
.img-corner.tl { top: 0;    left: 0; }
.img-corner.tr { top: 0;    right: 0;    transform: scaleX(-1); }
.img-corner.bl { bottom: 0; left: 0;     transform: scaleY(-1); }
.img-corner.br { bottom: 0; right: 0;    transform: scale(-1); }

.img-border-h {
  position: absolute;
  height: 1px;
  left: 28px; right: 28px;
  z-index: 3;
  background: linear-gradient(to right,
    rgba(212,168,67,.15),
    rgba(212,168,67,.4) 30%,
    rgba(212,168,67,.4) 70%,
    rgba(212,168,67,.15)
  );
}
.img-border-h.top { top: 0; }
.img-border-h.bot { bottom: 0; }

.img-border-v {
  position: absolute;
  width: 1px;
  top: 28px; bottom: 28px;
  z-index: 3;
  background: linear-gradient(to bottom,
    rgba(212,168,67,.15),
    rgba(212,168,67,.4) 30%,
    rgba(212,168,67,.4) 70%,
    rgba(212,168,67,.15)
  );
}
.img-border-v.left  { left: 0; }
.img-border-v.right { right: 0; }

/* ── Mobile — background-attachment: fixed ne fonctionne pas sur iOS ── */
@media (max-width: 768px) {
  .wrap-right {
    min-height: 320px;
    order: -1;
  }
  .origine-img {
    background-attachment: scroll;
  }
  .origine-img-overlay {
    background: linear-gradient(
      to bottom,
      rgba(7,6,4,.3) 0%,
      rgba(7,6,4,.7) 100%
    );
  }
}


/* ══ Section Matiere premiere ══ */
.mp-section {
  padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(48px,6vh,72px);
}
.mp-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
} 

/* ── Grille 5 colonnes ── */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  width: 100%;
}
/* ── Container carte ── */
.mp-item {
  background: var(--bg-section);
  padding: clamp(28px,3vw,44px);
  position: relative;
  /* retire l'ancien séparateur vertical — remplacé par les bordures */
}

/* Supprime le séparateur vertical précédent */
.mp-item + .mp-item::before { display: none; }

/* ── Coins ── */
.mp-corner {
  position: absolute;
  width: 28px;
  height: 28px;
}
.mp-corner svg { width: 100%; height: 100%; }
.mp-corner.tl { top: 0; left: 0; }
.mp-corner.tr { top: 0; right: 0; transform: scaleX(-1); }
.mp-corner.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.mp-corner.br { bottom: 0; right: 0; transform: scale(-1); }

/* ── Bordures graduées ── */
.mp-border-h {
  position: absolute;
  height: 1px;
  left: 28px; right: 28px;
  background: linear-gradient(to right,
    rgba(212,168,67,.12),
    rgba(212,168,67,.32) 30%,
    rgba(212,168,67,.32) 70%,
    rgba(212,168,67,.12)
  );
}
.mp-border-h.top { top: 0; }
.mp-border-h.bot { bottom: 0; }

.mp-border-v {
  position: absolute;
  width: 1px;
  top: 28px; bottom: 28px;
  background: linear-gradient(to bottom,
    rgba(212,168,67,.12),
    rgba(212,168,67,.32) 30%,
    rgba(212,168,67,.32) 70%,
    rgba(212,168,67,.12)
  );
}
.mp-border-v.left  { left: 0; }
.mp-border-v.right { right: 0; }

/* ── Hover — accentue les bordures ── */
.mp-item:hover .mp-border-h,
.mp-item:hover .mp-border-v {
  background: linear-gradient(to right,
    rgba(212,168,67,.15),
    rgba(212,168,67,.45) 30%,
    rgba(212,168,67,.45) 70%,
    rgba(212,168,67,.15)
  );
  transition: background .4s ease;
}
.mp-item:hover .mp-border-v {
  background: linear-gradient(to bottom,
    rgba(212,168,67,.15),
    rgba(212,168,67,.45) 30%,
    rgba(212,168,67,.45) 70%,
    rgba(212,168,67,.15)
  );
}

.mp-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(212,168,67,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.mp-item:hover::after {
  opacity: 1;
}


/* ── Grille — gap entre les cartes ── */
.mp-grid {
  gap: clamp(16px,2vw,24px);
}

.mp-item.visible { opacity: 1; transform: translateY(0); }
.mp-item:nth-child(2) { transition-delay: .1s; }
.mp-item:nth-child(3) { transition-delay: .2s; }
.mp-item:nth-child(4) { transition-delay: .3s; }
.mp-item:nth-child(5) { transition-delay: .4s; }

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

/* ── sub title ── */
.mp-item .sub-title {
  font-size: clamp(18px, 2vw, 22px);
}

/* ── Numéro outline ── */
.mp-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.mp-icon {
  width: clamp(36px,8vw,80px);
  height: clamp(36px,8vw,80px);
  color: rgba(212,168,67,.6);
  transition: color .4s ease;
  border-radius:50%;
}
.mp-icon img{
  border-radius:50%;
}
.mp-item:hover .mp-icon { color: rgba(212,168,67,.9); }

/* ── Ligne décorative ── */
.mp-line {
  width: 56px;
  height: 1px;
  background: linear-gradient(to right, var(--g2), transparent);
  margin: -4px 0 clamp(8px,0.9vh,10px);
}

/* ── Hover ── */
.mp-item:hover .mp-num { -webkit-text-stroke: 1px rgba(212,168,67,.9); }
.mp-item:hover .mp-line {
  width: 48px;
  background: linear-gradient(to right, var(--g1), transparent);
}

/* ── État allumé ── */
.mp-num.lit {
  -webkit-text-stroke: 1px rgba(212,168,67,.9);
  text-shadow: 0 0 20px rgba(212,168,67,.35), 0 0 40px rgba(212,168,67,.15);
  transition: -webkit-text-stroke .4s ease, text-shadow .4s ease;
}
.mp-item.lit .mp-line {
  width: 52px;
  background: linear-gradient(to right, var(--g2), var(--g4), transparent);
}

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

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

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

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

.etapes-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; 
}

.etapes-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.etapes-item:nth-child(2){transition-delay:.1s;}
.etapes-item:nth-child(3){transition-delay:.2s;}
.etapes-item:nth-child(4){transition-delay:.3s;}

/* Séparateur vertical */
.etapes-item+.etapes-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 */
.etapes-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,.45);
  letter-spacing:-.02em;
  user-select:none;
  transition:-webkit-text-stroke .3s ease;
}

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


/* Hover */
.etapes-item:hover .hl-line{
  width:48px;
  background:linear-gradient(to right,var(--g1),transparent);
}
.etapes-item:hover .sub-title{color:var(--g2);}
.etapes-item:hover .etapes-num{-webkit-text-stroke:1px rgba(212,168,67,.9);}

/* État allumé — appliqué par JS */
.etapes-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 */
.etapes-num {
  transition: -webkit-text-stroke 0.6s ease, text-shadow 0.6s ease;
}

/* Ligne qui s'élargit quand le numéro est lit */
.etapes-item.lit .etapes-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){
  .etapes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 0;}
  .etapes-item:nth-child(3)::before,
  .etapes-item:nth-child(1)::before{display:none;}
  .etapes-item:nth-child(3),
  .etapes-item:nth-child(4){border-top:1px solid rgba(212,168,67,.1);padding-top:40px;}
}
@media(max-width:480px){
  .etapes-grid{grid-template-columns:1fr;gap:40px;}
  .etapes-item+.hl-item::before{display:none;}
  .etapes-item:nth-child(n){border-top:1px solid rgba(212,168,67,.1);padding-top:40px;}
  .etapes-item:first-child{border-top:none;padding-top:0;}
}


/* ══ CTA Services ══ */
.cta-services {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: clamp(12px, 2vh, 20px) 0;
}

.cta-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(20px, 4vw, 48px);
  flex: 1;
}

.cta-service-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,168,67,.65);
  letter-spacing: -.02em;
  transition: -webkit-text-stroke .4s ease;
}

.cta-service-item:hover .cta-service-num {
  -webkit-text-stroke: 1px rgba(212,168,67,.9);
}

.cta-service-label {
  font-family: 'Cinzel', serif;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .65em;
  color: rgba(212,168,67,.6);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  transition: color .4s ease;
}

.cta-service-item:hover .cta-service-label {
  color: rgba(212,168,67,.9);
}

.cta-service-sep {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(212,168,67,.25) 40%,
    rgba(212,168,67,.25) 60%,
    transparent
  );
  flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .cta-services {
    flex-direction: column;
    gap: 16px;
  }
  .cta-service-sep {
    width: 40px;
    height: 1px;
    background: linear-gradient(to right,
      transparent,
      rgba(212,168,67,.25) 40%,
      rgba(212,168,67,.25) 60%,
      transparent
    );
  }
}