/* ==========================================================================
   HOME.CSS (spécifique Accueil.php)
   - Scope strict : .home-page (ne touche pas les autres pages)
   - Objectif :
     1) Badges "preuves" dans la Hero
     2) Ligne "trust" (preuves sobres, non-forceuses) sous les badges
     3) CTA discret en bas des cartes (accueil)
   ========================================================================== */

/* AJOUT PRO (Nettoyage) : 
   Le bloc `.home-page .contact-button { text-decoration: none; }` a été retiré
   car cette sécurité est déjà gérée globalement dans reference.css. Code plus propre !
*/

/* ==========================================================================
   1) Badges (preuves) dans la Hero
   ========================================================================== */

.home-page .home-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/*
  Badge individuel :
  - visuel discret mais "premium"
  - fond translucide + blur (cohérent avec ton design)
*/
.home-page .home-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    text-shadow: 0 0 1px var(--secondary-color), 0 0 2px var(--tertiary-color);
}


/* ==========================================================================
   2) TRUST LINE (preuves sobres sous les badges)
   ========================================================================== */
/*
  Objectif :
  - Ajouter de la confiance "pratique" (zone, horaires, diagnostic) sans surcharger
  - Rester pro et humain : pas un pavé, pas un bloc marketing
  - Rendu cohérent : micro-pastilles plus légères que les badges
*/
.home-page .home-trustline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;             /* petit espacement entre éléments */
    margin-top: 0.9rem;      /* espace après les badges */
    opacity: 0.95;           /* léger "soft" */
}

/*
  Item individuel :
  - un peu plus discret que .home-badge
  - garde une cohérence visuelle (border-soft + translucide)
  - MICRO AJUSTEMENT "PRO" :
      font-weight à 500 au lieu de 600
      => la trustline reste lisible mais moins "forte" que les badges
*/
.home-page .home-trustitem {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    font-size: 0.92rem;
    font-weight: 500; /* ✅ micro-amélioration (plus discret / plus premium) */
    color: var(--primary-color);

    /* On évite les gros glows sur du texte long : léger seulement */
    text-shadow: 0 0 1px rgba(59,130,246,0.25);
}

/*
  Séparateur "•"
  - aria-hidden dans le HTML (accessibilité)
  - discret pour ne pas "casser" la lecture
*/
.home-page .home-trustsep {
    opacity: 0.55;
    font-weight: 700;
    color: var(--primary-color);
}


/* ==========================================================================
   3) CTA discret en bas des cartes (Accueil)
   ========================================================================== */

/*
  On force un layout colonne uniquement sur Accueil :
  - permet d'utiliser "margin-top:auto" sur le CTA
  - donc le CTA se colle en bas de chaque carte
*/
.home-page .services-container {
    display: flex;
    flex-direction: column;
}

/* CTA discret en bas de carte */
.home-page .home-card-cta {
    margin-top: auto; /* pousse en bas */
    padding-top: 1.2rem;
    font-weight: 600;
    opacity: 0.9;
    text-align: center;
    text-shadow: 0 0 2px var(--secondary-color), 0 0 4px var(--tertiary-color);
    
    /* AJOUT PRO : On prépare la transition fluide pour le survol */
    transition: transform 0.3s ease, color 0.3s ease;
}

/* AJOUT PRO : Effet visuel incitatif au survol de la carte (UX premium) */
.service-card:hover .home-card-cta {
    transform: translateX(5px);
    color: var(--secondary-color);
}


/* ==========================================================================
   MEDIA QUERIES (EN BAS — comme demandé)
   ========================================================================== */

/* Mobile : badges + trust centrés (plus propre visuellement) */
@media (max-width: 600px) {

    .home-page .home-badges {
        justify-content: center;
    }

    /*
      Trust line centrée aussi :
      - plus lisible en mobile
      - évite une impression "alignée bizarre" si ça wrap sur 2 lignes
    */
    .home-page .home-trustline {
        justify-content: center;
        text-align: center;
    }
}