/* ============================================================
   2. style de #about — Éco'Mam
   ============================================================ */

/* ══════════════════════════════════════════
   VARIABLES (cohérence avec le projet)
   ══════════════════════════════════════════ */
:root {
  --belge:       #b5833e;
  --belge-light: #d4a373;
  --peche:       #eec9ae;
  --vert:        #54a66a;
  --vert-dark:   #414833;
  --vert-mid:    #656d4a;
  --creme:       #fefae0;
  --creme-2:     #ede0d4;
  --brun:        #7f5539;
  --brun-light:  #a68a64;
  --font-titre:  'Schoolbell', cursive;
  --font-texte:  'Nunito', sans-serif;
}


/* ══════════════════════════════════════════
   SECTION ABOUT — WRAPPER GÉNÉRAL
   ══════════════════════════════════════════ */
#about {
  background:    var(--creme);
  padding:       80px 0px 0px;
  overflow:      hidden;
}


/* ══════════════════════════════════════════
   EN-TÊTE DE SECTION
   ══════════════════════════════════════════ */
.about-header {
  text-align:    center;
  max-width:     640px;
  margin:        0 auto 64px;
  padding:       0 24px;
  	user-select : none;
}

/* Tag générique (réutilisé dans "notre espace" aussi) */
.section-tag {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  background:      rgba(84, 166, 106, .10);
  border:          1px solid rgba(84, 166, 106, .28);
  color:           var(--vert-mid);
  font-family:     var(--font-texte);
  font-size:       .70rem;
  font-weight:     800;
  letter-spacing:  2px;
  text-transform:  uppercase;
  padding:         5px 14px;
  border-radius:   20px;
  margin-bottom:   16px;
	user-select : none;
}

.section-tag i {
  font-size: .68rem;
  color:     var(--vert);
	user-select : none;
}

.about-header h2 {
  font-family:   var(--font-titre);
  font-size:     2.6rem;
  color:         var(--brun);
  margin:        0 0 12px;
  line-height:   1.15;
	user-select : none;
}

.about-header .section-subtitle {
  font-family: var(--font-texte);
  font-size:   1rem;
  color:       var(--brun-light);
  line-height: 1.7;
  margin:      0;
	user-select : none;
}


/* ══════════════════════════════════════════
   GRILLE DES CARTES ASSISTANTES
   ══════════════════════════════════════════ */
.about-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   28px;
  max-width:             1180px;
  margin:                0 auto 80px;
  padding:               0 40px;
}


/* ══════════════════════════════════════════
   CARTE INDIVIDUELLE
   ══════════════════════════════════════════ */
.about-card {
  background:    #fff;
  border-radius: 20px;
  overflow:      hidden;
  box-shadow:    0 4px 24px rgba(127, 85, 57, .08);
  border:        1px solid rgba(212, 163, 115, .18);
  transition:    transform .25s ease, box-shadow .25s ease;
}

.about-card:hover {
  box-shadow: 0 12px 40px rgba(127, 85, 57, .14);
}


/* Photo */
.about-card-photo {
  width:    100%;
  height:   220px;
  overflow: hidden;
  position: relative;
}

.about-card-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.about-card:hover .about-card-photo img {
  transform: scale(1.1);
}

/* Fallback si pas d'image */
.about-card-photo::after {
  content:         '';
  position:        absolute;
  inset:           0;
  background:      linear-gradient(
    180deg,
    transparent 50%,
    rgba(127, 85, 57, .18) 100%
  );
  pointer-events:  none;
}


/* Infos textuelles */
.about-card-info {
  padding: 24px 24px 28px;
}

.about-card-info h3 {
  font-family:   var(--font-titre);
  font-size:     1.35rem;
  color:         var(--brun);
  margin:        0 0 14px;
  line-height:   1.2;
}


/* Liste diplôme / expérience / agrément */
.about-card-details {
  list-style:    none;
  padding:       0;
  margin:        0 0 16px;
  display:       flex;
  flex-direction: column;
  gap:           9px;
}

.about-card-details li {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-family: var(--font-texte);
  font-size:   .82rem;
  color:       #5a4a38;
  line-height: 1.45;
}

.about-card-details li i {
  flex-shrink:   0;
  margin-top:    2px;
  font-size:     .78rem;
  color:         var(--vert);
  width:         16px;
  text-align:    center;
}

/* Pastille agréée */
.about-card-details li:last-child i {
  color: var(--belge);
}


/* Biographie */
.about-card-bio {
  font-family:  var(--font-texte);
  font-size:    .87rem;
  color:        var(--brun-light);
  line-height:  1.7;
  margin:       0;
  padding-top:  14px;
  border-top:   1px solid rgba(212, 163, 115, .22);
  font-style:   italic;
}


/* ══════════════════════════════════════════
   BLOC "NOTRE ESPACE" — MAISON
   ══════════════════════════════════════════ */
.about-house {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   56px;
  align-items:           center;
  margin:                0 auto;
  padding:               0 40px;
}


/* Photo maison */
.about-house-img {
  border-radius: 24px;
  overflow:      hidden;
  position:      relative;
}

.about-house-img img {
  width:      100%;
  height:     400px;
  object-fit: cover;
  display:    block;
  transition: transform .5s ease;
}

.about-house-img:hover img {
  transform: scale(1.04);
}

/* Décoration coin */
.about-house-img::before {
  content:       '';
  position:      absolute;
  bottom:        -16px;
  left:          -16px;
  width:         100px;
  height:        100px;
  border-radius: 16px;
  background:    var(--vert);
  opacity:       .15;
  z-index:       -1;
}


/* Texte côté maison */
.about-house-text {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            6px;
}

.about-house-text h3 {
  font-family:   var(--font-titre);
  font-size:     2rem;
  color:         var(--brun);
  margin:        0 0 12px;
  line-height:   1.2;
}

.about-house-text > p {
  font-family:  var(--font-texte);
  font-size:    .97rem;
  color:        #6b5440;
  line-height:  1.8;
  margin:       0 0 24px;
}


/* Liste des caractéristiques */
.about-house-features {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.about-house-features li {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-family: var(--font-texte);
  font-size:   .93rem;
  color:       #4a3b2c;
  font-weight: 600;
}

.about-house-features li i {
  flex-shrink:   0;
  width:         28px;
  height:        28px;
  background:    rgba(84, 166, 106, .14);
  border:        1px solid rgba(84, 166, 106, .28);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     .72rem;
  color:         var(--vert);
}


/* ══════════════════════════════════════════
   RESPONSIVE — TABLETTE (≤ 1024px)
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .about-cards {
    grid-template-columns: repeat(2, 1fr);
    padding:               0 28px;
  }

  .about-cards .about-card:last-child {
    grid-column: 1 / -1;
    max-width:   480px;
    margin:      0 auto;
    width:       100%;
  }

  .about-house {
    grid-template-columns: 1fr;
    gap:                   36px;
    padding:               0 28px;
  }
	
.about-house-img{
	grid-row : 2;
}
	

  .about-house-img img {
    height: 320px;
  }
}


/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 640px)
   ══════════════════════════════════════════ */
@media (max-width: 640px) {
  #about {
    padding: 64px 0 0px;
  }

  .about-header {
    margin-bottom: 40px;
    padding:       0 20px;
  }

  .about-header h2 {
    font-size: 2rem;
  }

  .about-cards {
    grid-template-columns: 1fr;
    padding:               0 20px;
    gap:                   20px;
  }

  .about-cards .about-card:last-child {
    max-width: 100%;
  }

  .about-card-photo {
    height: 200px;
  }

  .about-house {
    padding: 30px 20px;
    gap:     28px;
  }

  .about-house-img img {
    height: 240px;
  }

  .about-house-text h3 {
    font-size: 1.6rem;
  }
}