/* GABONIMMO.COM — Illustrations de rubriques.
   Chaque tuile et chaque titre de section porte son image : on comprend
   la rubrique d'un coup d'œil, même sans lire. */

/* Les illustrations sont détourées (PNG transparents) : aucun fond n'est
   posé sur l'image, elle se fond donc dans la carte, la page crème ou le
   pied de page sombre, sans rectangle visible. */
.illus {
  display: block;
  border-radius: 10px;
}

.illus-titre {
  display: block;
  flex: 0 0 auto;
  border-radius: 9px;
}

/* Illustration d'en-tête de rubrique : au-dessus du titre de la page. */
.illus-head {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 0 10px;
  border-radius: 10px;
}

@media (max-width: 640px) {
  .illus-head {
    height: 52px;
    margin-bottom: 8px;
  }
}

/* Tuile avec illustration : l'image en haut, le texte en dessous.
   Grille mobile-first : 2 colonnes sur téléphone, 4 sur ordinateur. */
.tuile-illus {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line, #E7DFD4);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tuile-illus:hover,
.tuile-illus:focus-visible {
  transform: translateY(-2px);
  border-color: var(--brand, #B4532A);
  box-shadow: 0 6px 18px rgba(90, 45, 20, .10);
}

.tuile-illus-visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  border-radius: 12px;
  background: #FBF6EF;
  overflow: hidden;
}

.tuile-illus-visuel img {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.tuile-illus-texte {
  min-width: 0;
}

.tuile-illus-texte b {
  display: block;
  font-size: .93rem;
  line-height: 1.25;
}

.tuile-illus-texte span {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  line-height: 1.35;
  color: var(--muted, #7A6A5C);
}

/* Titre de section avec son illustration à gauche.
   L'illustration occupe la colonne de gauche ; le titre et sa description
   s'empilent dans la colonne de droite. Avant, image + titre + description
   étaient trois éléments d'une même ligne flex : ils se tassaient et se
   chevauchaient dès que le texte était un peu long. */
.section-head-illus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
  row-gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.section-head-illus > .illus-titre,
.section-head-illus > .illus-head {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.section-head-illus > h2 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.section-head-illus > p {
  grid-column: 2;
  grid-row: 2;
  margin: 3px 0 0;
  color: var(--muted, #7A6A5C);
  font-size: .87rem;
  line-height: 1.45;
}

/* Variante où le titre et la description sont déjà groupés dans un div. */
.section-head-illus > div {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

/* Carte de ville / petite tuile : pictogramme remplacé par l'illustration. */
.tuile-mini {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tuile-mini img {
  flex: 0 0 auto;
  border-radius: 9px;
  background: #FBF6EF;
}

/* Pictogramme doré d'une étape ou d'un atout : chaque titre s'illustre
   tout seul, le sous-titre reste court et se lit d'un coup d'œil. */
.picto {
  display: block;
  height: 96px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Étape du parcours : le visuel occupe le haut de la carte, le numéro
   reste lisible dans un coin, le titre et le texte suivent. */
.etape-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.etape-visuel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: 14px;
  background: linear-gradient(160deg, #FBF6EF, #F6EDE2);
  border-bottom: 1px solid var(--line, #E7DFD4);
}

.etape-visuel .picto {
  height: 92px;
}

.etape-num {
  position: absolute;
  top: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand, #B4532A);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.etape-card h3,
.etape-card p {
  padding: 0 16px;
}

.etape-card h3 {
  margin-top: 14px;
}

.etape-card p {
  padding-bottom: 16px;
}

/* Atout : même principe, sans numéro. */
.atout-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  overflow: hidden;
}

.atout-visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 118px;
  padding: 14px;
  background: linear-gradient(160deg, #FBF6EF, #F6EDE2);
  border-bottom: 1px solid var(--line, #E7DFD4);
}

.atout-visuel .picto {
  height: 88px;
}

.atout-card h3,
.atout-card p {
  padding: 0 16px;
}

.atout-card h3 {
  margin-top: 14px;
}

.atout-card p {
  padding-bottom: 16px;
}

/* Bloc des transactions : pictogramme à gauche sur ordinateur,
   empilé au-dessus du texte sur téléphone. */
.transaction-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.transaction-visuel {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  min-height: 100px;
  border-radius: 12px;
  background: linear-gradient(160deg, #FBF6EF, #F6EDE2);
}

.transaction-visuel .picto {
  height: 84px;
}

.transaction-texte {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 700px) {
  .transaction-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .transaction-visuel {
    width: 100%;
    min-height: 92px;
  }
  .transaction-visuel .picto {
    height: 76px;
  }
}

@media (max-width: 640px) {
  .tuile-illus-visuel {
    min-height: 74px;
  }
  .etape-visuel {
    min-height: 108px;
    padding: 12px;
  }
  .etape-visuel .picto {
    height: 74px;
  }
  .atout-visuel {
    min-height: 100px;
    padding: 12px;
  }
  .atout-visuel .picto {
    height: 70px;
  }
  .tuile-illus {
    padding: 10px;
  }
  .tuile-illus-texte b {
    font-size: .86rem;
  }
  .tuile-illus-texte span {
    font-size: .72rem;
  }
  .section-head-illus {
    gap: 10px;
  }
}