/* =========================================
   11 - SAVOIR-FAIRE
========================================= */

.sfBand{
  position: relative;
  overflow: hidden;
  color: var(--ruggieri-white);
  padding: clamp(48px, 6vw, 84px) 0;
  background: linear-gradient(to bottom, #0b0b0b, #111);
}

.sfBand-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Fond photo flouté */
.sfBand-bg::before{
  content:"";
  position: absolute;
  inset: -16%;
  background: var(--sf-bg) center / cover no-repeat;
  filter: blur(16px) saturate(1.06);
  transform: scale(1.06);
  opacity: 0.55;
}

/* Overlay sombre + léger glow */
.sfBand-bg::after{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(189,158,87,0.12), rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.62), rgba(0,0,0,0.78));
  opacity: 1;
}

.sfBand-inner{
  position: relative;
  z-index: 1;
}

.sfGrid{
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch; /* 👈 garantit la même hauteur des colonnes */
}

/* Texte */
.sfText{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: clamp(18px, 2.2vw, 26px);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.sfTitle{
  margin: 0 0 14px;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ruggieri-accent);
}

.sfBody p{
  margin: 0 0 12px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
}
.sfBody p:last-child{ margin-bottom: 0; }

/* Photo nette */
.sfPhotoWrap{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 90px rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.25);
  /* hauteur auto = celle de la colonne texte grâce au grid + align-stretch */
}

.sfPhoto{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 👈 “verticale” = on remplit */
}

/* Responsive */
@media (max-width: 980px){
  .sfGrid{
    grid-template-columns: 1fr;
  }
  .sfPhotoWrap{
    aspect-ratio: 16 / 10; /* garde une belle présence en mobile */
  }
}

/* =========================
   Reveal animation
========================= */
[data-reveal]{
  opacity: 0;
  transform: translate3d(0,0,0);
  transition:
    opacity .70s ease,
    transform .85s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

[data-reveal="left"]{ transform: translate3d(-18px, 0, 0); }
[data-reveal="right"]{ transform: translate3d(18px, 0, 0); }

.is-inview{
  opacity: 1;
  transform: translate3d(0,0,0);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Crédit photo */
.sfPhotoCredit{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;

  padding: 6px 12px;
  border-radius: 999px;

  font-family: "Manrope", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;

  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  pointer-events: none; /* pure info */
}

.sfPhotoCredit em{
  font-style: italic;
  color: var(--ruggieri-accent);
}


/* =========================
   Bandeau photo parallax
========================= */
.sfParallax{
  position: relative;
  width: 100%;
  overflow: hidden;

  /* ratio 4:1 => bandeau plutôt “ciné” */
  height: clamp(220px, 28vw, 420px);

  /* petits espacements pour respirer entre sections */
  margin: clamp(26px, 4vw, 44px) 0;
}

.sfParallax-media{
  position: absolute;
  inset: -12% 0; /* un peu plus grand pour permettre le mouvement */
  background: var(--pimg) center / cover no-repeat;

  transform: translate3d(0,0,0);
  will-change: transform;
}

/* Optionnel : un très léger fade en bas/haut pour l’intégration (pas un filtre sur l’image) */
.sfParallax::before,
.sfParallax::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height: 22%;
  pointer-events:none;
  z-index: 1;
}
.sfParallax::before{
  top:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.sfParallax::after{
  bottom:0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

@media (prefers-reduced-motion: reduce){
  .sfParallax-media{ transform: none !important; }
}


/* Variante inversée : photo à gauche, texte à droite */
.sfBand--reverse .sfGrid{
  grid-template-columns: 0.85fr 1.35fr;
}

@media (max-width: 980px){
  .sfBand--reverse .sfGrid{
    grid-template-columns: 1fr;
  }
}


.sfBody h3{
  margin: 28px 0 14px;

  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--ruggieri-accent);
}


.sfBody .sfList{
  list-style: none;
  padding: 0;
  margin: 0 0 6px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}


.sfBody .sfList li{
  position: relative;
  padding-left: 26px;

  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;

  color: rgba(255,255,255,0.88);
}


.sfBody .sfList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .55em;

  width: 9px;
  height: 9px;

  background: linear-gradient(
    135deg,
    #d5b66a 0%,
    #bd9e57 45%,
    #796840 100%
  );

  clip-path: polygon(
    50% 0%,
    62% 38%,
    100% 50%,
    62% 62%,
    50% 100%,
    38% 62%,
    0% 50%,
    38% 38%
  );

  transform: rotate(45deg);
  opacity: 0.9;
}
/* Layout 50/50 uniquement pour le bloc final */
.sfBand--half .sfGrid{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 980px){
  .sfBand--half .sfGrid{
    grid-template-columns: 1fr;
  }
}



/* ==========================================================
   Savoir-faire � bouton d�marche RSE
========================================================== */

.sfRseBtn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top: 24px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  font-size: 0.95rem;
  line-height:1.2;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--ruggieri-accent) 0%, #d85a53 100%);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.sfRseBtn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.28),
    0 0 24px rgba(255,116,107,0.18);
  background: linear-gradient(135deg, #f06a63 0%, #cf544d 100%);
}

.sfRseBtn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 4px;
}

.sfRseBtn__text{
  display:block;
}

.sfRseBtn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  flex: 0 0 34px;
  transition: transform 0.28s ease, background 0.28s ease;
}

.sfRseBtn:hover .sfRseBtn__icon{
  transform: translateX(2px);
  background: rgba(255,255,255,0.18);
}

@media (max-width: 640px){
  .sfRseBtn{
    width:100%;
    justify-content:space-between;
    padding: 14px 18px;
  }
}


.sfRseBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration:none;
  color:#fff;
  font-weight:600;
  font-size: 0.88rem;
  line-height:1.2;
  letter-spacing: 0.01em;

  background: linear-gradient(135deg, var(--ruggieri-accent) 0%, #d85a53 100%);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.06) inset;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.sfRseBtn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.22),
    0 0 18px rgba(255,116,107,0.15);

  background: linear-gradient(135deg, #ee6a62 0%, #cf544d 100%);
}

.sfRseBtn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  flex: 0 0 26px;
  transition: transform 0.25s ease, background 0.25s ease;
}

.sfRseBtn:hover .sfRseBtn__icon{
  transform: translateX(2px);
  background: rgba(255,255,255,0.18);
}



/* Bloc final : image enti�re, non rogn�e */
.sfBand--half .sfPhotoWrap{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: auto;
}

.sfBand--half .sfPhoto{
  width: 100%;
  height: auto;
  object-fit: contain;
}


@media (max-width: 980px){

  /* Bloc final : texte d'abord, image ensuite */
  .sfBand--half .sfText{
    order: 1;
  }

  .sfBand--half .sfPhotoWrap{
    order: 2;
    aspect-ratio: auto;
    height: auto;
  }

  .sfBand--half .sfPhoto{
    width: 100%;
    height: auto;
    object-fit: contain;
  }

}