/* =========================================================
   COMPOSANT — Badges de réassurance (ladln-features)
   Style : nature / carnet de voyage, discret et premium.
   Utilisation : 3 badges horizontaux (icône + titre).

   Aucune dépendance externe : les icônes sont des SVG inline dans le
   HTML (pas de Font Awesome à charger), et la police reprend celle
   déjà utilisée par le thème (--police-texte : "Work Sans").
========================================================= */

.ladln-features{
  /* Variables locales au composant : toutes les valeurs de la charte
     sont ici, faciles à ajuster sans toucher au reste des règles */
  --ladln-features-color:        #4B7A52;
  --ladln-features-color-soft:   rgba(75, 122, 82, .08);
  --ladln-features-color-hover:  rgba(75, 122, 82, .14);
  --ladln-features-text:         #2f2f2f;
  --ladln-features-font:         var(--police-texte, 'Work Sans', sans-serif);

  --ladln-features-gap:          24px;   /* espace entre badges */
  --ladln-features-inner-gap:    12px;                      /* espace cercle / texte */
  --ladln-features-circle:       50px;
  --ladln-features-icon-size:    26px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--ladln-features-gap);
  padding: 16px;
}

/* ===== Badge individuel ===== */
.ladln-feature{
  display: flex;
  align-items: center;
  gap: var(--ladln-features-inner-gap);
  transition: transform .3s ease;
}

.ladln-feature:hover,
.ladln-feature:focus-within{
  transform: translateY(-3px);
}

/* ===== Cercle icône ===== */
.ladln-feature-icon{
  flex-shrink: 0; /* le cercle ne doit jamais s'écraser dans le flex */
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--ladln-features-circle);
  height: var(--ladln-features-circle);
  border-radius: 50%;

  background-color: var(--ladln-features-color-soft);
  color: var(--ladln-features-color);

  transition: background-color .3s ease;
}

/* Icône en SVG inline : dimensionnée via currentColor pour hériter
   la couleur du cercle sans classe supplémentaire */
.ladln-feature-icon svg{
  width: var(--ladln-features-icon-size);
  height: var(--ladln-features-icon-size);
}

.ladln-feature:hover .ladln-feature-icon,
.ladln-feature:focus-within .ladln-feature-icon{
  background-color: var(--ladln-features-color-hover);
}

/* ===== Texte ===== */
.ladln-feature-content{
  /* Largeur volontairement contenue pour garder le titre sur
     deux lignes maximum (cf. maquette), pas une largeur "par défaut" */
  max-width: 170px;
  text-align: left;
}

.ladln-feature-content h3{
  margin: 0;
  font-family: var(--police-texte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ladln-features-text);
  padding: 0;
}

/* =========================================
   Responsive
========================================= */

/* Tablette : on garde 3 badges sur une ligne, espacement réduit */
@media (max-width: 1024px){
  .ladln-features{
    --ladln-features-gap: clamp(20px, 3.5vw, 36px);
  }
}

/* Mobile : un badge par ligne */
@media (max-width: 640px){
  .ladln-features{
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .ladln-feature-content{
    max-width: none;
  }
}