.main_autres_pages {
  margin-top: 60vh;
  width: 100%;
}

h4, h2 {
  margin-bottom: 2rem;;
}
/* ========================================
   Page À PROPOS - Hero Section
   ======================================== */

.hero-apropos {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60vh;  
  display: flex;
  align-items: end;
  justify-content: left;
  overflow: hidden;
  margin-top: 0;
  padding-bottom: 0;
  z-index: 100;
}

.hero-apropos canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-apropos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 2px
    );
  pointer-events: none;
  z-index: 1;
}

.hero-apropos-content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  width: 100%;
  padding: 0 0 50px 0;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  z-index: 2;
  text-align: left;
  color: var(--color-creme);
}

.hero-apropos-content h1 {
  grid-column: 2 / span 5;
  color: var(--color-sapin);
}

.hero-apropos-content p {
  color: var(--color-sapin);
  grid-column: 2 / span 6;
}

/* ========================================
   Page À PROPOS - Section Manifeste
   ======================================== */

.section-manifeste {
  width: 100%;
    background-color: var(--color-creme);
    padding: 200px 0 75px 0;
    position: relative;
    z-index: 500;    
}

.section-manifeste h6 {
  grid-column: 4/ span 7;
  font-size: 1.3rem;
  text-align:left;
  font-weight: 400;
  line-height: 1.68;
  color: var(--color-charbon);
}

.section-manifeste h6 strong {
  color: var(--color-corail);
}

.manifeste-title {
  grid-column: 3 / span 6;
  color: var(--color-sapin);
  text-transform: lowercase;
}

.section-grid {
  gap: 1.5rem;
}

.section-grid_valeurs {
  display: grid;
  column-gap: 0;
  gap: 0 !important;
}

.manifeste-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter);
  grid-column: 4 / 11;
}

.manifeste-col {
  grid-column: auto;
}

.manifeste-col p {
  color: var(--color-charbon);
  margin-top: 1.5rem;
}

/* ========================================
   Page A PROPOS - Section Valeurs
   ======================================== */

.section-valeurs {
  position: relative;
  z-index: 500;
  background: var(--color-creme);
}

/* ---- Carte pleine largeur (gauche : numéro + titre / droite : corps) ---- */
.valeur-card {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 38% 1fr;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.valeur-card.valeur-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Fonds alternants ---- */
.valeur-1,
.valeur-3 {
  background: var(--color-creme);
}

.valeur-2,
.valeur-4 {
  background: var(--color-sapin-light-3);
}

/* ---- Liseré gauche animé au hover ---- */
.valeur-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.valeur-1::after,
.valeur-3::after {
  background: var(--color-corail);
}

.valeur-2::after,
.valeur-4::after {
  background: var(--color-sapin);
}

.valeur-card:hover::after {
  transform: scaleY(1);
}

/* ---- Panneau gauche ---- */
.valeur-left {
  padding: 72px 8% 72px 10%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Grand chiffre décoratif en filigrane */
.valeur-1 .valeur-left::before { content: "01"; }
.valeur-2 .valeur-left::before { content: "02"; }
.valeur-3 .valeur-left::before { content: "03"; }
.valeur-4 .valeur-left::before { content: "04"; }

.valeur-left::before {
  position: absolute;
  right: 0;
  bottom: -0.22em;
  font-size: clamp(7rem, 15vw, 15rem);
  font-weight: 800;
  font-family: "Parkinsans", sans-serif;
  line-height: 1;
  pointer-events: none;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.valeur-1 .valeur-left::before,
.valeur-3 .valeur-left::before {
  color: var(--color-corail);
  opacity: 0.07;
}

.valeur-2 .valeur-left::before,
.valeur-4 .valeur-left::before {
  color: var(--color-sapin);
  opacity: 0.07;
}

.valeur-card:hover .valeur-left::before {
  transform: scale(1.04);
  opacity: 0.09;
}

/* ---- Numéro ---- */
.valeur-numero {
  font-family: "Parkinsans", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.valeur-1 .valeur-numero,
.valeur-3 .valeur-numero {
  color: var(--color-corail);
}

.valeur-2 .valeur-numero,
.valeur-4 .valeur-numero {
  color: var(--color-sapin);
}

/* ---- Titre ---- */
.valeur-card h4 {
  color: var(--color-sapin);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.28;
  margin: 0;
}

/* ---- Panneau droit ---- */
.valeur-right {
  padding: 72px 10% 72px 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 90%;
}

/* ---- Corps de texte ---- */
.valeur-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.valeur-body p {
  color: var(--color-charbon-light-1);
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0;
}

.valeur-body p:first-child {
  font-size: 1rem;
  color: var(--color-charbon);
}

.valeur-body p strong {
  color: var(--color-sapin);
  font-weight: 700;
}

/* ---- Fondu des voisines au hover ---- */
.section-grid_valeurs:hover .valeur-card.valeur-visible {
  opacity: 0.25;
}

.valeur-card.valeur-visible:hover {
  opacity: 1 !important;
}

/* ========================================
   RESPONSIVE - Section Valeurs
   ======================================== */

@media (max-width: 1024px) {
  .valeur-card {
    grid-template-columns: 42% 1fr;
  }

  .valeur-left,
  .valeur-right {
    padding: 56px 8%;
  }

  .valeur-card h4 {
    font-size: 1.15rem;
  }
}

@media (max-width: 768px) {
  .valeur-card {
    grid-template-columns: 1fr;
  }

  .valeur-card h4 {
    font-size: 1.5rem;
  }

  .valeur-left {
    padding: 48px 6% 28px;
    overflow: visible;
  }

  .valeur-right {
    padding: 24px 6% 48px;
  }

  .valeur-left::before {
    font-size: clamp(5rem, 22vw, 9rem);
    opacity: 0.05 !important;
  }
}

@media (max-width: 480px) {
  .valeur-left {
    padding: 40px 5% 24px;
  }

  .valeur-right {
    padding: 20px 5% 40px;
  }
}

/* ============================================================
   RESPONSIVE — Page À PROPOS
   ============================================================ */

/* ── Laptop 1024–1279px ── */

@media (max-width: 1279px) {
  .hero-apropos-content h1 { grid-column: 2 / span 7; }
  .hero-apropos-content p  { grid-column: 2 / span 7; }

  .section-manifeste h6  { grid-column: 3 / span 8; }
  .manifeste-title       { grid-column: 2 / span 7; }
  .manifeste-content     { grid-column: 3 / span 9; }

  /* Équipe */
  .membre-image   { grid-column: 2 / span 4 !important; }
  .membre-details { grid-column: 7 / span 5 !important; }
}

/* ── Tablet 768–1023px ── */

@media (max-width: 1023px) {
  .main_autres_pages { margin-top: 50vh; }
  .hero-apropos      { height: 50vh; }

  .hero-apropos-content h1 { grid-column: 2 / span 9; font-size: 2.5rem; }
  .hero-apropos-content p  { grid-column: 2 / span 9; }
  .hero-apropos-content    { padding: 0 0 40px; }

  /* Manifeste */
  .section-manifeste  { padding: 140px 0 60px; }
  .manifeste-title    { grid-column: 2 / span 8; }
  .section-manifeste h6 { grid-column: 2 / span 9; font-size: 1.15rem; }
  .manifeste-content  { grid-column: 2 / span 10; }

  /* Équipe */
  .section-equipe { padding: 80px 0 0; }
  .equipe-title   { grid-column: 2 / span 9; }
  .membre-row     { padding: 70px var(--gutter); }
  .membre-image   { grid-column: 2 / span 4; }
  .membre-details { grid-column: 7 / span 5; }
  .membre-details h4 { font-size: 1.6rem; }
}

/* ── Mobile 480–767px ── */

@media (max-width: 767px) {
  .main_autres_pages { margin-top: 45vh; }
  .hero-apropos      { height: 45vh; }

  .hero-apropos-content h1 { grid-column: 2 / span 9; }
  .hero-apropos-content p  { grid-column: 2 / span 9; font-size: 0.9rem; }
  .hero-apropos-content    { padding: 0 0 30px; }

  /* Manifeste */
  .section-manifeste  { padding: 100px 0 50px; }
  .manifeste-title    { grid-column: 2 / span 9; }
  .section-manifeste h6 { grid-column: 2 / span 9; font-size: 1.05rem; }
  .manifeste-content  { grid-column: 2 / span 9; grid-template-columns: 1fr; }

  /* Équipe */
  .section-equipe    { padding: 70px 0 0; }
  .equipe-header     { padding: 0 var(--gutter) 50px; }
  .equipe-title      { grid-column: 1 / -1; }
  .membre-row        { padding: 60px var(--gutter); row-gap: 2rem; }
  .membre-image      { grid-column: 2 / span 5; order: 1; }
  .membre-details    { grid-column: 1 / -1; order: 2; }
  .membre-details h4 { font-size: 1.4rem; }
  .membre-numero     { font-size: 2rem; }
}

/* ── Mobile XS < 480px ── */

@media (max-width: 479px) {
  .hero-apropos-content h1 { grid-column: 2 / span 10; }
  .section-manifeste h6    { grid-column: 2 / span 9; font-size: 0.95rem; }
  .manifeste-content       { grid-column: 2 / span 9; }
  .membre-image            { grid-column: 3 / span 8; }
}
/* ========================================
   Page À PROPOS - Section Conclusion Manifeste
   ======================================== */

/* ========================================
   Page À PROPOS - Section Équipe
   ======================================== */

/* ========================================
   Page À PROPOS - Section Équipe
   ======================================== */

.section-equipe {
  padding: 100px 0 0 0;
  position: relative;
  z-index: 500;
  background: var(--color-creme);
}

.equipe-header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 0 var(--gutter) 80px;
}

.equipe-title {
  grid-column: 2 / span 8;
  color: var(--color-sapin);
  text-transform: lowercase;
  margin: 0;
}

/* ---- Rangée éditoriale ---- */
.membre-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  padding: 80px var(--gutter);
  position: relative;
  overflow: hidden;
}

.membre-row-1,
.membre-row-3 {
  background: var(--color-creme);
}

.membre-row-2 {
  background: var(--color-sapin-light-3);
}

/* Numéro décoratif en filigrane */
.membre-row-1::before { content: "loïs"; color: var(--color-corail); opacity: 0.07; }
.membre-row-2::before { content: "alan"; color: var(--color-sapin);  opacity: 0.05; }
.membre-row-3::before { content: "cassandre"; color: var(--color-corail); opacity: 0.07; }

.membre-row::before {
  position: absolute;
  bottom: -0.22em;
  right: -0.03em;
  font-family: "Parkinsans", sans-serif;
  font-size: clamp(6rem, 14vw, 15rem);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 0;
}

/* ---- Photo portrait ---- */
.membre-image {
  grid-column: 2 / span 3;
  aspect-ratio: 3 / 4;
  border-radius: 0 0 0 20px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: transform 0.6s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: transform;
  cursor: pointer;
}

.membre-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.membre-row:hover .membre-image {
  transform: scale(1.03);
}

/* Pas de zoom hover sur les photos membres sur mobile/touch */
@media (hover: none), (max-width: 767px) {
  .membre-row:hover .membre-image {
    transform: none;
  }
}

/* ---- Bloc texte ---- */
.membre-details {
  grid-column: 6 / span 5;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

/* Numéro d'ordre (petit label) */
.membre-numero {
  font-family: "Parkinsans", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-corail);
}

.membre-row-2 .membre-numero {
  color: var(--color-sapin);
}

/* Nom */
.membre-details h4 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--color-sapin);
  text-transform: lowercase;
  line-height: 1.15;
  margin: 0;
}

/* Rôle */
.membre-role {
  color: var(--color-charbon-light-2);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
  font-weight: 400;
}

/* Séparateur accent */
.membre-divider {
  width: 36px;
  height: 2px;
  background: var(--color-corail);
  flex-shrink: 0;
}

.membre-row-2 .membre-divider {
  background: var(--color-sapin-light-1);
}

/* Bio */
.membre-bio-text {
  color: var(--color-charbon);
  font-size: 0.9rem;
  line-height: 1.82;
  margin: 0;
}

/* Footer contacts + social */
.membre-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.25rem;
  background: none;
  border-top: none;
}

.membre-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.membre-link {
  color: var(--color-sapin);
  text-decoration: none;
  position: relative;
  display: inline-block;
  width: fit-content;
  font-size: 0.82rem;
  font-weight: 500;
}

.membre-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-sapin);
  transition: width 0.3s ease;
}

.membre-link:hover::after {
  width: 100%;
}

.membre-social {
  color: var(--color-sapin);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.25s ease, transform 0.25s ease;
}

.membre-social:hover {
  color: var(--color-corail);
  transform: scale(1.1);
}

/* ========================================
   RESPONSIVE - QUERIES
   ======================================== */

@media (max-width: 1024px) {
  .membre-image {
    grid-column: 1 / span 5;
  }
  .membre-details {
    grid-column: 6 / span 7;
  }

  .membre-row {
    padding: 40px var(--gutter);
}
}

@media (max-width: 768px) {
  .equipe-header {
    padding: 0 var(--gutter) 50px;
  }
  .equipe-title {
    grid-column: 1 / -1;
  }
  .membre-row {
    grid-template-columns: repeat(12, 1fr);
    padding: 48px var(--gutter);
    align-items: start;
  }
  .membre-image {
    grid-column: 1 / span 4;
    aspect-ratio: 3 / 4;
    align-self: center;
  }
  .membre-details {
    grid-column: 5 / span 8;
    gap: 1rem;
  }
  .membre-row::before {
    font-size: clamp(5rem, 22vw, 9rem);
  }
}

@media (max-width: 480px) {
  .membre-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 48px var(--gutter);
  }
  .membre-image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 4;
  }
  .membre-details {
    width: 100%;
    gap: 1.25rem;
  }
}