/* =========================================================
   DU TOIT AU JARDIN 972
   PAGE : AMÉNAGEMENTS EXTÉRIEURS EN BOIS
   FICHIER : css/amenagements.css
========================================================= */


/* =========================================================
   PAGE GÉNÉRALE
========================================================= */

#page-amenagements {
  background:
    linear-gradient(
      180deg,
      rgba(248, 246, 238, 0.98) 0%,
      rgba(255, 255, 255, 1) 42%,
      rgba(246, 244, 235, 1) 100%
    );
}


/* =========================================================
   EN-TÊTE DE LA PAGE
========================================================= */

.amex-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 48px;
}

.amex-hero::after {
  content: "";
  position: absolute;
  top: -135px;
  right: -115px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(125, 143, 78, 0.09);
  pointer-events: none;
}

.amex-fil-ariane {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 24px;
  font-size: 0.8rem;
  color: var(--or2, #9a7434);
}

.amex-retour-accueil {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--or2, #9a7434);
  font: inherit;
  cursor: pointer;
}

.amex-retour-accueil:hover {
  text-decoration: underline;
}

.amex-hero-contenu {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.amex-surtitre {
  margin: 0 0 8px;
  color: var(--or2, #9a7434);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.amex-hero h1 {
  max-width: 780px;
  margin: 0 0 18px;
  line-height: 1.08;
}

.amex-introduction {
  max-width: 790px;
  margin: 0 0 12px;
  font-size: clamp(1.08rem, 2.3vw, 1.32rem);
  font-weight: 700;
  line-height: 1.55;
}

.amex-texte-hero {
  max-width: 810px;
  margin: 0 0 28px;
  color: var(--texte2, #4f5149);
  line-height: 1.75;
}

.amex-actions-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* =========================================================
   SECTIONS
========================================================= */

.amex-section {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 46px 0;
}

.amex-titre-section {
  max-width: 790px;
  margin: 0 auto;
  text-align: center;
}

.amex-titre-section h2 {
  margin: 12px 0 14px;
}

.amex-titre-section p {
  margin: 0;
  color: var(--texte2, #55574f);
  line-height: 1.75;
}

.amex-pastille {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 13px;
  border: 1px solid rgba(155, 119, 53, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--or2, #9a7434);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   TITRES DES FAMILLES DE PRODUITS
========================================================= */

.amex-famille {
  padding-top: 26px;
}

.amex-entete-famille {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 25px;
}

.amex-numero-famille {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 50%;
  background: var(--or2, #9a7434);
  color: #ffffff;
  font-weight: 900;
}

.amex-entete-famille h2 {
  margin: 0 0 8px;
}

.amex-entete-famille p {
  max-width: 780px;
  margin: 0;
  color: var(--texte2, #55574f);
  line-height: 1.65;
}


/* =========================================================
   GRILLE DES PRODUITS
========================================================= */

.amex-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}


/* =========================================================
   CARTES
========================================================= */

.amex-carte {
  overflow: hidden;
  border: 1px solid rgba(103, 101, 83, 0.14);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(46, 49, 39, 0.09);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.amex-carte:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(46, 49, 39, 0.14);
}

.amex-carte-principale {
  border-color: rgba(155, 119, 53, 0.38);
}


/* =========================================================
   IMAGES
========================================================= */

.amex-image {
  position: relative;
  width: 100%;
  background: #f3f3f3;
  text-align: center;
  padding: 12px;
}

.amex-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  margin: 0 auto;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.amex-carte:hover .amex-image img {
  transform: scale(1.035);
}
}


/* =========================================================
   BADGES SUR LES IMAGES
========================================================= */

.amex-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(23, 31, 24, 0.84);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  backdrop-filter: blur(5px);
}

.amex-badge-fort {
  background: rgba(142, 101, 27, 0.94);
}


/* =========================================================
   CONTENU DES CARTES
========================================================= */

.amex-contenu-carte {
  padding: 25px;
}

.amex-reference {
  margin: 0 0 7px !important;
  color: var(--or2, #9a7434) !important;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.amex-contenu-carte h3 {
  margin: 0 0 13px;
  font-size: clamp(1.35rem, 2vw, 1.68rem);
}

.amex-contenu-carte > p {
  color: var(--texte2, #54564f);
  line-height: 1.68;
}


/* =========================================================
   OPTIONS DES MODÈLES
========================================================= */

.amex-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 4px;
}

.amex-options span {
  padding: 7px 10px;
  border-radius: 9px;
  background: #f2f0e8;
  color: #4b4d45;
  font-size: 0.78rem;
  font-weight: 700;
}


/* =========================================================
   VARIANTES ET UTILISATIONS
========================================================= */

.amex-variantes {
  margin-top: 19px;
  padding: 15px 17px;
  border-left: 3px solid var(--or2, #9a7434);
  border-radius: 0 11px 11px 0;
  background: #f7f5ee;
}

.amex-variantes h4 {
  margin: 0 0 9px;
  font-size: 1rem;
}

.amex-variantes ul {
  margin: 0;
  padding-left: 19px;
}

.amex-variantes li {
  margin: 6px 0;
  line-height: 1.45;
}


/* =========================================================
   NOTE TECHNIQUE
========================================================= */

.amex-note-technique {
  margin-top: 18px !important;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f6f3e8;
  font-size: 0.86rem;
}


/* =========================================================
   LIENS D'ÉTUDE DES PROJETS
========================================================= */

.amex-lien-projet {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 23px;
  color: var(--or2, #9a7434);
  font-weight: 800;
  text-decoration: none;
}

.amex-lien-projet:hover {
  text-decoration: underline;
}


/* =========================================================
   BLOC PERSONNALISATION
========================================================= */

.amex-personnalisation {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 42px;
  align-items: center;
  padding: clamp(28px, 5vw, 52px);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(238, 234, 220, 0.95),
      rgba(255, 255, 255, 0.98)
    );
  box-shadow: 0 15px 40px rgba(53, 52, 43, 0.08);
}

.amex-personnalisation h2 {
  margin: 12px 0 16px;
}

.amex-personnalisation p {
  color: var(--texte2, #53554e);
  line-height: 1.75;
}


/* =========================================================
   ENGAGEMENTS
========================================================= */

.amex-liste-engagements {
  display: grid;
  gap: 12px;
}

.amex-engagement {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(120, 113, 82, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.amex-engagement span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(105, 127, 73, 0.13);
  color: #52683b;
  font-weight: 900;
}

.amex-engagement p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.42;
}


/* =========================================================
   APPEL À L'ACTION FINAL
========================================================= */

.amex-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 35px;
  align-items: center;
  padding: clamp(30px, 5vw, 55px);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      #243326,
      #40563d
    );
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(28, 40, 29, 0.2);
}

.amex-cta h2 {
  margin: 5px 0 13px;
  color: #ffffff;
}

.amex-cta p {
  max-width: 720px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.7;
}

.amex-cta .amex-surtitre {
  color: #e4c783;
}

.amex-cta-actions {
  display: grid;
  gap: 11px;
  min-width: 230px;
}


/* =========================================================
   BOUTONS
========================================================= */

.amex-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 47px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  line-height: 1.25;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.amex-btn:hover {
  transform: translateY(-2px);
}

.amex-btn-principal {
  background: var(--or2, #9a7434);
  color: #ffffff;
}

.amex-btn-secondaire {
  border-color: rgba(116, 104, 72, 0.28);
  background: rgba(255, 255, 255, 0.78);
  color: var(--or2, #9a7434);
}

.amex-btn-clair {
  background: #ffffff;
  color: #263426;
}

.amex-btn-whatsapp {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}


/* =========================================================
   RETOUR EN BAS DE PAGE
========================================================= */

.amex-retour-bas {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 52px;
  text-align: center;
}

.amex-btn-retour {
  padding: 11px 18px;
  border: 1px solid rgba(120, 113, 82, 0.25);
  border-radius: 10px;
  background: #ffffff;
  color: var(--or2, #9a7434);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.amex-btn-retour:hover {
  background: #f6f3e8;
}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 900px) {

  .amex-grille {
    grid-template-columns: 1fr;
  }

  .amex-personnalisation {
    grid-template-columns: 1fr;
  }

  .amex-cta {
    grid-template-columns: 1fr;
  }

  .amex-cta-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .amex-section {
    width: min(100% - 22px, 1180px);
    padding: 32px 0;
  }

  .amex-hero {
    padding-bottom: 34px;
  }

  .amex-fil-ariane {
    margin-bottom: 18px;
  }

  .amex-entete-famille {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .amex-numero-famille {
    width: 42px;
    height: 42px;
    font-size: 0.82rem;
  }

  .amex-grille {
    gap: 20px;
  }

  .amex-carte {
    border-radius: 17px;
  }

  .amex-contenu-carte {
    padding: 20px;
  }

  .amex-image {
    aspect-ratio: 4 / 3;
  }

  .amex-personnalisation,
  .amex-cta {
    padding: 25px 20px;
    border-radius: 18px;
  }

  .amex-cta-actions {
    grid-template-columns: 1fr;
  }

  .amex-actions-hero {
    display: grid;
  }

  .amex-options span {
    font-size: 0.74rem;
  }

  .amex-btn {
    width: 100%;
  }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width: 390px) {

  .amex-section {
    width: min(100% - 16px, 1180px);
  }

  .amex-contenu-carte {
    padding: 17px;
  }

  .amex-entete-famille {
    grid-template-columns: 1fr;
  }

  .amex-numero-famille {
    width: 40px;
    height: 40px;
  }

  .amex-personnalisation,
  .amex-cta {
    padding: 22px 16px;
  }

}
/* Correction de la hauteur des cartes Aménagements */

#page-amenagements .amex-section,
#page-amenagements .amex-grille,
#page-amenagements .amex-carte,
#page-amenagements .amex-contenu-carte {
  height: auto !important;
  max-height: none !important;
}

#page-amenagements .amex-carte,
#page-amenagements .amex-contenu-carte {
  overflow: visible !important;
}