/* =========================================================
   PRICING PAGE
========================================================= */

.pricing {
  width: min(1180px, calc(100% - 40px));

  margin: 0 auto;

  padding:
      110px 0
      120px;
}


/* =========================================================
   INTRO
========================================================= */

.pricing-intro {
  max-width: 720px;

  margin-bottom: 65px;
}


.eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  color: #a55a43;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.pricing-intro h1 {
  margin: 0;

  font-family: Georgia, serif;

  font-size:
      clamp(
          42px,
          6vw,
          70px
      );

  font-weight: 400;

  line-height: 1;

  letter-spacing: -3px;

  color: #1d1d1f;
}


.pricing-intro h1 span {
  color: #a55a43;
}


.pricing-intro p {
  max-width: 620px;

  margin:
      28px 0 0;

  color: #806f63;

  font-size: 16px;

  line-height: 1.75;
}


/* =========================================================
   PRICING GRID
========================================================= */

.pricing-grid {
  display: grid;

  grid-template-columns:
      repeat(3, minmax(0, 1fr));

  gap: 18px;

  align-items: stretch;
}


/* =========================================================
   PRICE CARD
========================================================= */

.price-card {
  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;
  min-height: 100%;

  overflow: hidden;

  padding: 30px;

  border:
      1px solid
      rgb(51 37 31 / 10%);

  border-radius: 22px;

  background: #fffaf4;

  transition:
      transform .25s ease,
      box-shadow .25s ease,
      border-color .25s ease;
}


/* .price-card:hover {
  transform: translateY(-5px);

  border-color:
      rgb(185 95 69 / 25%);

  box-shadow:
      0 20px 45px
      rgb(51 37 31 / 9%);
} */


/* =========================================================
   MAIN SITE CARDS
========================================================= */

.price-card--main {
  grid-column: span 1;
}


.price-card--highlight {
  border-color:
      rgb(185 95 69 / 35%);

  background:
      linear-gradient(
          145deg,
          #f6e8df,
          #fffaf4
      );
}


.price-card--highlight::before {
  content: "POPULAIRE";

  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 3;

  padding:
      6px 9px;

  border-radius: 999px;

  background: #b95f45;

  color: white;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .1em;
}


/* =========================================================
   CARD TOP
========================================================= */

/*
   IMPORTANT :

   Toutes les cartes d'une même ligne ont maintenant
   une zone supérieure de même hauteur.

   Cela permet d'aligner :
   - prix
   - titre
   - description
   - image
*/

.price-card-top {
  position: relative;

  /*
     Les cartes de la même ligne auront la même hauteur
     grâce au fonctionnement du grid.
  */
  flex: 0 0 auto;

  display: flex;

  flex-direction: column;
}


/* =========================================================
   ALIGNEMENT DES CARTES AVEC IMAGE
========================================================= */

/*
   Les cartes contenant une image ont une zone supérieure
   suffisamment grande pour que toutes les images commencent
   au même niveau.

   On utilise la hauteur de la carte voisine la plus grande
   grâce à une grille interne.
*/

.pricing-grid {
  align-items: stretch;
}


/*
   Les cartes avec une image utilisent une structure
   suffisamment régulière.
*/

.price-card:has(.price-image) .price-card-top {
  min-height: 245px;
}


/*
   Si tes images sont directement des <img> et non dans
   .price-image, cette règle prend également en charge
   ces cartes.
*/

.price-card > img {
  width: 100%;
  height: auto;

  display: block;

  margin:
      28px 0
      4px;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  border-radius: 14px;

  background: #eee4dc;
}


/* =========================================================
   PRICE TYPE
========================================================= */

.price-type {
  display: block;

  margin-bottom: 18px;

  color: #a55a43;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;
}


/* =========================================================
   PRICE
========================================================= */

.price {
  margin-bottom: 7px;

  font-family: Georgia, serif;

  font-size: 42px;

  line-height: .95;

  letter-spacing: -1.5px;

  color: #1d1d1f;
}


/* =========================================================
   TITLE
========================================================= */

.price-card h2 {
  margin:
      12px 0
      14px;

  font-family: Georgia, serif;

  font-size: 25px;

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: -.5px;

  color: #1d1d1f;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.price-card-top p {
  margin: 0;

  color: #806f63;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================================
   CARD IMAGE
========================================================= */

.price-image {
  position: relative;

  width: 100%;

  margin:
      28px 0
      4px;

  overflow: hidden;

  border-radius: 14px;

  background: #eee4dc;

  aspect-ratio: 16 / 10;
}


.price-image::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
      linear-gradient(
          to bottom,
          transparent 65%,
          rgb(0 0 0 / 8%)
      );
}


.price-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
      transform .5s cubic-bezier(.2,.7,.2,1);
}


/* .price-card:hover .price-image img {
  transform: scale(1.035);
} */


/* =========================================================
   CARD CONTENT
========================================================= */

.price-card-content {
  display: flex;

  flex-direction: column;

  flex: 1;
}


.features-title {
  display: block;

  margin:
      24px 0 13px;

  padding-top: 20px;

  border-top:
      1px solid
      rgb(51 37 31 / 9%);

  color: #a55a43;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;
}


/* =========================================================
   FEATURES
========================================================= */

.price-features {
  display: flex;

  flex-direction: column;

  gap: 10px;

  margin: 0;

  padding: 0;

  list-style: none;
}


.price-features li {
  position: relative;

  padding-left: 20px;

  color: #594a41;

  font-size: 12px;

  line-height: 1.5;
}


.price-features li::before {
  content: "✓";

  position: absolute;

  top: 0;
  left: 0;

  color: #b95f45;

  font-size: 12px;

  font-weight: 700;
}


/* =========================================================
   PRICE NOTE
========================================================= */

.price-note {
  margin-top: auto;

  padding-top: 25px;

  color: #806f63;

  font-size: 11px;

  line-height: 1.65;
}


.price-note strong {
  color: #594a41;
}


/* =========================================================
   STORAGE / PAYMENT BLOCKS
========================================================= */

.pricing-storage {
  display: grid;

  grid-template-columns:
      minmax(280px, .75fr)
      1fr;

  gap: 60px;

  margin-top: 18px;

  padding:
      32px 35px;

  border-radius: 20px;

  background: #33251f;

  color: #fffaf4;
}


.pricing-storage-label {
  display: block;

  margin-bottom: 8px;

  color: #d9a08d;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.pricing-storage h3 {
  margin: 0;

  font-family: Georgia, serif;

  font-size: 27px;

  font-weight: 400;

  line-height: 1.1;
}


.pricing-storage p {
  margin: 0;

  color: #d5c4ba;

  font-size: 13px;

  line-height: 1.75;
}


/* =========================================================
   MAINTENANCE
========================================================= */

.maintenance {
  margin-top: 125px;
}


.maintenance-intro {
  max-width: 700px;

  margin-bottom: 48px;
}


.maintenance-intro h2 {
  margin:
      0 0 18px;

  font-family: Georgia, serif;

  font-size:
      clamp(
          38px,
          5vw,
          56px
      );

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: -2px;

  color: #1d1d1f;
}


.maintenance-intro h2 span {
  color: #a55a43;
}


.maintenance-intro p {
  margin: 0;

  color: #806f63;

  font-size: 15px;

  line-height: 1.75;
}


/* =========================================================
   MAINTENANCE GRID
========================================================= */

.maintenance-grid {
  display: grid;

  grid-template-columns:
      repeat(2, minmax(0, 1fr));

  gap: 18px;
}


.maintenance-card {
  padding: 30px;

  border:
      1px solid
      rgb(51 37 31 / 10%);

  border-radius: 20px;

  background:
      rgb(255 250 244 / 70%);

  transition:
      transform .25s ease,
      box-shadow .25s ease;
}


/* .maintenance-card:hover {
  transform: translateY(-3px);

  box-shadow:
      0 15px 35px
      rgb(51 37 31 / 7%);
} */


.maintenance-number {
  display: block;

  margin-bottom: 20px;

  color: #b95f45;

  font-family: Georgia, serif;

  font-size: 27px;

  line-height: 1;
}


.maintenance-card h3 {
  margin:
      0 0 14px;

  font-family: Georgia, serif;

  font-size: 22px;

  font-weight: 400;

  color: #1d1d1f;
}


.maintenance-card p {
  margin:
      0 0 13px;

  color: #806f63;

  font-size: 13px;

  line-height: 1.7;
}


.maintenance-card ul {
  display: flex;

  flex-direction: column;

  gap: 8px;

  margin:
      17px 0;

  padding: 0;

  list-style: none;
}


.maintenance-card li {
  position: relative;

  padding-left: 17px;

  color: #594a41;

  font-size: 13px;

  line-height: 1.5;
}


.maintenance-card li::before {
  content: "—";

  position: absolute;

  left: 0;

  color: #b95f45;
}


.maintenance-small {
  margin-top: 20px !important;

  font-size: 11px !important;

  color: #99877c !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .pricing {
      width: min(100% - 32px, 760px);

      padding:
          90px 0
          100px;
  }


  .pricing-grid {
      grid-template-columns:
          repeat(2, minmax(0, 1fr));
  }


  .price-card--main {
      grid-column: span 1;
  }


  /*
     On passe à une hauteur adaptée lorsque seulement
     deux cartes sont affichées par ligne.
  */

  .price-card:has(.price-image) .price-card-top {
      min-height: 265px;
  }


  .pricing-storage {
      grid-template-columns: 1fr;

      gap: 20px;
  }

}


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

@media (max-width: 700px) {

  .pricing {
      width: calc(100% - 30px);

      padding:
          70px 0
          80px;
  }


  .pricing-intro {
      margin-bottom: 45px;
  }


  .pricing-intro h1 {
      font-size: 43px;

      letter-spacing: -2px;
  }


  .pricing-intro p {
      margin-top: 22px;

      font-size: 14px;
  }


  /* -----------------------------------------
     PRICING GRID
  ----------------------------------------- */

  .pricing-grid {
      grid-template-columns: 1fr;

      gap: 14px;
  }


  .price-card,
  .price-card--main {
      grid-column: auto;

      padding: 25px;

      border-radius: 18px;
  }


  .price-card--highlight {
      transform: none;
  }


  .price-card:hover {
      transform: none;
  }


  /*
     Sur mobile, il n'est plus nécessaire de forcer
     la hauteur : les cartes sont empilées.
  */

  .price-card:has(.price-image) .price-card-top {
      min-height: auto;
  }


  .price {
      font-size: 38px;
  }


  .price-card h2 {
      font-size: 23px;
  }


  .price-card-top p {
      font-size: 13px;

      line-height: 1.65;
  }


  .price-image,
  .price-card > img {
      aspect-ratio: 16 / 10;

      margin-top: 24px;
  }


  /* -----------------------------------------
     STORAGE
  ----------------------------------------- */

  .pricing-storage {
      gap: 18px;

      margin-top: 14px;

      padding:
          25px;

      border-radius: 18px;
  }


  .pricing-storage h3 {
      font-size: 24px;
  }


  /* -----------------------------------------
     MAINTENANCE
  ----------------------------------------- */

  .maintenance {
      margin-top: 90px;
  }


  .maintenance-intro {
      margin-bottom: 35px;
  }


  .maintenance-intro h2 {
      font-size: 39px;

      letter-spacing: -1.5px;
  }


  .maintenance-grid {
      grid-template-columns: 1fr;

      gap: 14px;
  }


  .maintenance-card {
      padding: 25px;

      border-radius: 18px;
  }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 400px) {

  .pricing {
      width: calc(100% - 24px);
  }


  .price-card {
      padding: 21px;
  }


  .pricing-intro h1 {
      font-size: 38px;
  }


  .price {
      font-size: 35px;
  }

}