/* =========================================================
   Garance&moi – Module "Vous vous reconnaissez ?" (gm-idv2)
   VERSION PRO (CTA maîtrisé, icônes rose, spacing parfait)
   Scope : .gm-idv2.gm-idv2--ck uniquement
========================================================= */

.gm-idv2.gm-idv2--ck{
  --gm-blue:#0032a9;
  --gm-ink:#1f1f1f;
  --gm-muted:rgba(31,31,31,.72);

  --gm-card:#fff;
  --gm-border:rgba(0,50,169,.12);

  /* ✅ icônes : rose */
  --gm-icon-bg:#f6e6e8;          /* rose doux */
  --gm-icon-border:rgba(214,109,126,.28);

  /* ombres premium */
  --gm-shadow:0 12px 30px rgba(0,0,0,.06);
  --gm-shadow-hover:0 20px 52px rgba(0,0,0,.10);

  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  position: relative;
}

/* Reset minimal */
.gm-idv2.gm-idv2--ck,
.gm-idv2.gm-idv2--ck *{ box-sizing:border-box; }

/* Container */
.gm-idv2.gm-idv2--ck .gm-idv2__container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding: 44px 24px 34px;

  background: transparent !important;
  background-image:none !important;
}

/* Anti theme “font:” / tailles énormes */
.gm-idv2.gm-idv2--ck .gm-idv2__container h1,
.gm-idv2.gm-idv2--ck .gm-idv2__container h2,
.gm-idv2.gm-idv2--ck .gm-idv2__container h3,
.gm-idv2.gm-idv2--ck .gm-idv2__container h4,
.gm-idv2.gm-idv2--ck .gm-idv2__container p{
  margin:0;
  padding:0;
  letter-spacing:normal;
  text-transform:none;
}

/* ✅ Titre section : spacing PRO (plus d’air avant les cards) */
.gm-idv2.gm-idv2--ck .gm-idv2__title{
  color:var(--gm-blue);
  font-weight:700;
  font-size:clamp(34px, 3.1vw, 52px);
  line-height:1.12;
  margin:0 0 30px;              /* 👈 plus d'espace */
}

/* Grid */
.gm-idv2.gm-idv2--ck .gm-idv2__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;                      /* 👈 respiration */
  align-items:stretch;
}

/* Cards */
.gm-idv2.gm-idv2--ck .gm-idv2__card{
  background:var(--gm-card) !important;
  border:1px solid var(--gm-border) !important;
  border-radius:22px !important;
  padding:24px 24px 22px !important;
  box-shadow:var(--gm-shadow) !important;
  min-width:0;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}

.gm-idv2.gm-idv2--ck .gm-idv2__card:hover{
  transform:translateY(-3px);
  box-shadow:var(--gm-shadow-hover) !important;
}

/* Header : alignement nickel */
.gm-idv2.gm-idv2--ck .gm-idv2__cardHeader{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
  min-width:0;
}

/* ✅ Icon wrap ROSE */
.gm-idv2.gm-idv2--ck .gm-idv2__iconWrap{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--gm-icon-bg) !important;     /* 👈 rose */
  border:1px solid var(--gm-icon-border) !important;
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Icône (jamais énorme) */
.gm-idv2.gm-idv2--ck .gm-idv2__iconImg{
  width:30px !important;
  height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  object-fit:contain !important;
  display:block !important;
}

/* Titre card */
.gm-idv2.gm-idv2--ck .gm-idv2__cardTitle{
  color:var(--gm-blue);
  font-weight:700;
  font-size:22px;
  line-height:1.22;
  margin:0;
  min-width:0;

  /* anti “reconver-sion” */
  hyphens:none !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* Texte card */
.gm-idv2.gm-idv2--ck .gm-idv2__cardText{
  color:var(--gm-muted);
  font-size:16px;
  line-height:1.62;
  font-weight:500;
  margin:0 !important;
  max-width:52ch;
}

/* CTA wrap */
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap{
  margin-top: 22px;              /* cohérent avec le rythme vertical */
  display:flex;
  justify-content:center;
}

/* ✅ CTA : NORMAL (plus petit, plus chic, plus “site”) */
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper a,
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper .hs-cta-node{
  background:var(--gm-blue) !important;
  color:#fff !important;
  border-radius:999px !important;

  /* 👇 taille maîtrisée */
/*   padding:12px 22px !important; */
  font-size:16px !important;
  font-weight:600 !important;

  width:auto !important;
  min-width: 220px !important;   /* 👈 plus petit */
  max-width: 300px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;

  box-shadow:0 14px 32px rgba(0,50,169,.18) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper a:hover,
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper .hs-cta-node:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
  box-shadow:0 18px 42px rgba(0,50,169,.22) !important;
}

/* =========================
   ANTI-CASSE HubSpot
========================= */
.gm-idv2.gm-idv2--ck img,
.gm-idv2.gm-idv2--ck picture,
.gm-idv2.gm-idv2--ck svg{
  max-width:100% !important;
  height:auto !important;
}

/* image “perdue” injectée dans le container -> on masque */
.gm-idv2.gm-idv2--ck .gm-idv2__container > img,
.gm-idv2.gm-idv2--ck .gm-idv2__container > picture,
.gm-idv2.gm-idv2--ck .gm-idv2__container > figure,
.gm-idv2.gm-idv2--ck .gm-idv2__container > svg{
  display:none !important;
}

/* empêcher gradients/pseudos hérités */
.gm-idv2.gm-idv2--ck,
.gm-idv2.gm-idv2--ck *::before,
.gm-idv2.gm-idv2--ck *::after{
  background-image:none !important;
}

/* Responsive */
@media (max-width: 980px){
  .gm-idv2.gm-idv2--ck .gm-idv2__container{ padding:34px 18px 26px; }
  .gm-idv2.gm-idv2--ck .gm-idv2__grid{ grid-template-columns:1fr; gap:18px; }
  .gm-idv2.gm-idv2--ck .gm-idv2__title{ margin-bottom:22px; }
  .gm-idv2.gm-idv2--ck .gm-idv2__ctawrap{ margin-top:18px; }
  .gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper a,
  .gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper .hs-cta-node{
    min-width: 200px !important;
    max-width: 280px !important;
  }
}
/* =========================================================
   GM-IDV2 — PATCH FINAL V2 (à coller TOUT EN BAS)
   Fix: CTA énorme + spacing titre->cards + fond icône rose
========================================================= */

/* 1) ESPACE ENTRE LE TITRE ET LES CARDS (on verrouille) */
.gm-idv2.gm-idv2--ck .gm-idv2__title{
  margin: 0 0 32px !important;   /* + d’air */
  padding: 0 !important;
  line-height: 1.10 !important;
}

/* Si le thème met des marges bizarres sur la grille */
.gm-idv2.gm-idv2--ck .gm-idv2__grid{
  margin-top: 0 !important;
}

/* 2) ICÔNES: FOND ROSE (et bordure douce) */
.gm-idv2.gm-idv2--ck .gm-idv2__iconWrap{
  background: #F6E6E8 !important;              /* rose G&M */
  border: 1px solid rgba(215, 140, 150, .35) !important;
  box-shadow: none !important;
}

/* 3) CTA: STOP BOUTON GÉANT (HubSpot override hardcore) */
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap{
  margin-top: 28px !important;
  display: flex !important;
  justify-content: center !important;
}

/* Le wrapper HubSpot peut forcer du full width */
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper{
  width: auto !important;
  max-width: 100% !important;
  display: inline-block !important;
}

/* Cible LARGE: a + .hs-cta-node + éléments internes HubSpot */
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper a,
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper .hs-cta-node,
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper a *,
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper .hs-cta-node *{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Le bouton lui-même (compact, propre, pas “pavé”) */
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper a,
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper .hs-cta-node{
  /* reset des trucs qui rendent énorme */
  width: auto !important;
  min-width: 0 !important;
  max-width: 340px !important;
  height: auto !important;
  max-height: none !important;

  /* look G&M */
  background: #0032a9 !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;

  /* taille maîtrisée */
/*   padding: 14px 26px !important;     /* <= réduit */ */
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;    /* évite que ça prenne 2 lignes */
  box-shadow: 0 14px 32px rgba(0,50,169,.18) !important;

  /* au cas où HubSpot met du transform/scale */
  transform: none !important;
}

/* Hover clean */
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper a:hover,
.gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper .hs-cta-node:hover{
  filter: brightness(.97) !important;
}

/* 4) Responsive: bouton prend un peu plus de place mais reste contrôlé */
@media (max-width: 980px){
  .gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper a,
  .gm-idv2.gm-idv2--ck .gm-idv2__ctawrap .hs-cta-wrapper .hs-cta-node{
    max-width: 100% !important;
    width: 100% !important;
/*     padding: 14px 20px !important; */
    white-space: normal !important; /* sur mobile OK de passer à 2 lignes */
  }
}