/* ==========================================================================
   Composant partage : carte "Google Preferred Sources"
   Fonctionnalite Google du 20/08/2026 (signal declaratif "Sources preferees",
   badge dans Search et Apercus IA). Dossier source : Gemini, valide par Jean
   le 23/08/2026 sur 4 emplacements.

   Fichier canonique unique pour les 4 emplacements (regle de proprete CSS,
   Jean) :
     1. index.html            (fin de section Realisations)
     2. merci-devis.html      (page de remerciement devis)
     3. grand-guide-peinture-gironde.html (fin d'article, apres l'auteur)
     4. simulateur2/simulateur-jo-le-pinceau.html (derniere section, avant footer)

   Version colonne (pas ligne) : a largeur de carte fixe, un bouton
   non-coupable a cote d'un texte flex laissait moins de place au texte que
   necessaire et le faisait s'effondrer en un mot par ligne (bug constate en
   production sur merci-devis.html le 24/08 23h44, corrige le 25/08).
   ========================================================================== */

.google-preferred-card {
  /* Centrage horizontal explicite : ce composant est un <aside> autonome,
     hors de tout .container (qui ne fait que limiter/centrer une largeur,
     sans padding lateral dans base.css). Sans "margin: auto" il colle au
     bord gauche du parent (constate en production le 29/08 sur index.html
     et grand-guide-peinture-gironde.html : grand vide a droite, alors que
     merci-devis.html restait correct car deja imbrique dans un conteneur
     etroit). "width: calc(100% - 2.2rem)" laisse ~1.1rem de respiration de
     chaque cote sur mobile, ecart identique a .content-section ailleurs sur
     le site. */
  background: var(--JS_Blanc-casse, #FBF9F5);
  border: 1px solid var(--JS_Bordures-fines, rgba(39, 68, 56, 0.14));
  border-radius: 16px;
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  margin: 36px auto;
  box-shadow: 0 4px 16px rgba(23, 53, 43, 0.04);
  width: calc(100% - 2.2rem);
  max-width: 540px;
  box-sizing: border-box;
}

.google-preferred-card--confirmation {
  background: var(--JS_Ivoire-doux, #F6F3EE);
  border-color: var(--JS_Logo_vert-principal, #94BBA8);
}

.google-preferred-content {
  width: 100%;
}

.badge-label-preferred {
  display: inline-block;
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--JS_Logo_vert-Fonce, #497266);
  background: rgba(148, 187, 168, 0.2);
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.preferred-title {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--JS_Vert-principal, #274438);
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.preferred-text {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 0.95rem;
  color: var(--JS_Texte-principal, #1F3129);
  line-height: 1.5;
}

.btn-google-preferred {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--JS_Vert-profond, #17352B);
  color: #FFFFFF !important;
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(23, 53, 43, 0.15);
}

.btn-google-preferred:hover {
  background: var(--JS_Terracotta-CTA, #b85a2e);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 90, 46, 0.25);
}

.btn-google-preferred:focus-visible {
  outline: 2px solid var(--JS_Terracotta-CTA, #b85a2e);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .google-preferred-card {
    padding: 20px;
  }
  .btn-google-preferred {
    width: 100%;
    justify-content: center;
  }
}