/* =====================================================================
   Accueil v4 (page-home-v4.php). Les sections reprises de la landing
   /logiciel-crm/ gardent leurs classes crm-lp-* (styles.css) ; ici, seulement
   les blocs propres à l'accueil : preuves, bénéfices, deux formules, Charik Pro
   chiffré, garantie France. Thème clair, couleurs et rayons du design system.
   ===================================================================== */
.hv4 { --hv4-grad: linear-gradient(135deg, #5DD39E 0%, #2B9FE8 100%); --hv4-soft: linear-gradient(135deg, rgba(93,211,158,.12), rgba(43,159,232,.12));
    /* Neutres chauds plutôt que le gris-bleu du thème : la page doit être accueillante */
    --hv4-cream: #FAF7F2; --hv4-mint: #EAF8F1; --hv4-sky: #EAF4FC; --hv4-peach: #FFF2E7;
    --hv4-ink: #1A2233; --hv4-ink-2: #5B6475; }
.hv4-grad { background: var(--hv4-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Texte en dégradé : le dégradé ne se peint que dans la boîte du texte. Avec un interligne
   serré, le bas des virgules et des jambages, et le bord droit des chiffres, sortaient de la
   boîte et paraissaient coupés. On agrandit la zone peinte, sans bouger la mise en page. */
.hv4-grad, .hv4-score-num, .hv4-big, .hv4-price-num, .hv4-compare-total { padding: .06em .08em .14em .02em; margin: -.06em -.08em -.14em -.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hv4-score-num, .hv4-big { display: inline-block; line-height: 1; }
.hv4-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.12; letter-spacing: -.025em; }

/* En-têtes de section */
.hv4-head { max-width: 760px; margin: 0 auto 2.75rem; text-align: center; }
.hv4-head h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2; margin: 0 0 .75rem; color: var(--color-text); }
.hv4-head p { font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }

/* Icônes en pastille */
.hv4-ic { width: 48px; height: 48px; border-radius: var(--radius-md, 12px); display: grid; place-items: center; background: var(--hv4-soft); color: #2B9FE8; flex: none; }
.hv4-ic svg { width: 22px; height: 22px; }
.hv4-ic--grad { background: var(--hv4-grad); color: #fff; }

/* 2. Preuves d'adoption : grille « bento » claire et chaleureuse.
   Pas de fond sombre hors menu et pied de page (décision Jimmy, 21/10/2026) :
   nos clients ne sont pas des techniciens, la page doit être accueillante. */
.hv4 .hv4-proofs { background: var(--hv4-cream); padding: 6rem 0; }
.hv4-kicker { display: inline-block; margin-bottom: 1rem; padding: .35rem .9rem; border-radius: 9999px; background: #fff; box-shadow: 0 2px 8px -4px rgba(15,23,42,.15); font-size: .8125rem; font-weight: 700; color: #1F9D6A; }

.hv4-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 1.25rem; }
.hv4-tile { position: relative; margin: 0; border-radius: 24px; padding: 1.85rem; background: #fff;
    border: 1px solid rgba(15,23,42,.06); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -24px rgba(15,23,42,.18);
    display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.hv4-tile:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 26px 50px -24px rgba(15,23,42,.24); }
body .hv4 .hv4-tile h3 { color: var(--hv4-ink); font-size: 1.2rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
body .hv4 .hv4-tile p { margin: 0; font-size: .975rem; line-height: 1.55; color: var(--hv4-ink-2); }

/* Note Salesdorado : grande tuile menthe */
.hv4-tile--rating { grid-column: span 2; grid-row: span 2; justify-content: flex-start; background: var(--hv4-mint); border-color: rgba(31,157,106,.12); }
.hv4-tile-label { font-size: .875rem; font-weight: 600; color: #1F7A55; }
.hv4-score-row { display: flex; align-items: flex-end; gap: 1.25rem; margin-top: 1rem; flex-wrap: wrap; }
.hv4-score { display: flex; align-items: baseline; gap: .5rem; }
.hv4-score-num { font-size: clamp(5rem, 9vw, 7.5rem); font-weight: 800; line-height: .9; letter-spacing: -.05em;
    background: var(--hv4-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv4-score-max { font-size: 1.75rem; font-weight: 700; color: #6B9A86; }
body .hv4 .hv4-tile .hv4-score-crit { margin: 0 0 .6rem; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--hv4-ink); }
.hv4-bars { list-style: none; margin: 1.5rem 0 0; padding: 1.1rem 1.25rem; display: grid; gap: .7rem; background: rgba(255,255,255,.7); border-radius: 16px; }
.hv4-bars li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 2.2rem; align-items: center; gap: .85rem; font-size: .9rem; color: var(--hv4-ink-2); }
.hv4-bars i { height: 8px; border-radius: 9999px; background: rgba(15,23,42,.08); position: relative; overflow: hidden; }
.hv4-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: #9BD9BD; }
.hv4-bars li.is-top { color: var(--hv4-ink); font-weight: 700; }
.hv4-bars li.is-top i::after { background: var(--hv4-grad); }
.hv4-bars b { text-align: right; color: var(--hv4-ink); }
body .hv4 .hv4-tile--rating blockquote { margin: auto 0 .6rem; padding-top: 1.5rem; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.35; font-weight: 600; color: var(--hv4-ink); letter-spacing: -.01em; font-style: normal; }
.hv4-tile--rating figcaption { font-size: .875rem; color: #4E7A66; }

/* Migration 24 h : tuile bleu ciel */
.hv4-tile--migration { grid-column: span 2; flex-direction: row; align-items: center; gap: 1.75rem; justify-content: flex-start; background: var(--hv4-sky); border-color: rgba(43,159,232,.12); }
.hv4-big { font-size: 5.5rem; font-weight: 800; line-height: .9; letter-spacing: -.05em; flex: none;
    background: var(--hv4-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv4-big small { font-size: 2.25rem; margin-left: .15rem; }

/* Outils du quotidien */
.hv4-logos { display: flex; align-items: center; gap: .45rem; margin-bottom: auto; padding-bottom: 1.25rem; flex-wrap: wrap; }
.hv4-logos > span { width: 46px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 6px 16px -10px rgba(15,23,42,.3); display: grid; place-items: center; overflow: hidden; }
.hv4-logos img { width: 30px; height: 30px; object-fit: contain; display: block; }
.hv4-logos svg { display: block; }
.hv4-logo-txt { display: flex !important; gap: .35rem; align-items: center; font-size: .8125rem; font-weight: 700; color: var(--hv4-ink); }
.hv4-logo-txt svg { width: 16px; height: 16px; color: #2B9FE8; }

/* Mobile : tuile pêche avec mini téléphone */
.hv4-tile--mobile { background: var(--hv4-peach); border-color: rgba(234,140,70,.12); }
.hv4-phone { overflow: hidden; position: relative; align-self: center; width: 150px; height: 128px; margin-bottom: 1.25rem; border-radius: 22px 22px 0 0;
    border: 6px solid #1E293B; border-bottom: 0; background: #F8FAFC;
    padding: 22px 10px 0; display: grid; gap: 7px; align-content: start; box-shadow: 0 -8px 30px -12px rgba(234,140,70,.45); }
.hv4-phone-notch { position: absolute; top: 6px; left: 50%; width: 44px; height: 6px; border-radius: 6px; background: #1E293B; transform: translateX(-50%); }
.hv4-phone-card { display: block; padding: 7px 9px; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px -6px rgba(15,23,42,.3); }
.hv4-phone-card b { display: block; font-size: .72rem; color: #0F172A; }
.hv4-phone-card small { display: block; font-size: .65rem; color: #64748B; }
.hv4-phone-card--2 { opacity: .75; }

/* Tuiles Charik Pro : données et signaux */
/* Le tag est une étiquette sombre, pas un bouton : il ne doit pas ressembler à « Ajouter », en dégradé */
.hv4-pro-tag { position: absolute; top: 1.25rem; right: 1.25rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem .3rem .6rem; border-radius: 9999px; background: var(--hv4-ink); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .01em; box-shadow: 0 6px 14px -8px rgba(26,34,51,.55); }
.hv4-pro-tag svg { width: 13px; height: 13px; color: #5DD39E; }
.hv4-tile--data { grid-column: span 2; background: linear-gradient(160deg, #fff 40%, var(--hv4-sky)); justify-content: flex-start; gap: 1.1rem; }
.hv4-data-head { display: flex; align-items: center; gap: 1.1rem; padding-right: 6rem; }
body .hv4 .hv4-data-head h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.hv4-big--sm { font-size: 4rem; }
.hv4-big--sm small { font-size: 1.75rem; }
.hv4-search { background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: .9rem; box-shadow: 0 10px 24px -18px rgba(15,23,42,.35); }
.hv4-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.hv4-filters span { padding: .3rem .65rem; border-radius: 9999px; background: var(--hv4-sky); color: #1B6FA8; font-size: .8125rem; font-weight: 600; }
.hv4-result { display: flex; align-items: center; gap: .75rem; }
.hv4-co { width: 36px; height: 36px; border-radius: 10px; background: #1A2233; color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.hv4-result > span:nth-child(2) { flex: 1; min-width: 0; }
.hv4-result b { display: block; font-size: .95rem; color: var(--hv4-ink); }
.hv4-result small { display: block; font-size: .8rem; color: var(--hv4-ink-2); }
.hv4-add { padding: .35rem .8rem; border-radius: 9999px; background: var(--hv4-grad); color: #fff; font-size: .8rem; font-weight: 700; }
/* Version anglaise : créneau choisi et rendez-vous confirmé à la place de la recherche Pro */
.hv4-filters span.is-picked { background: var(--hv4-grad); color: #fff; }
.hv4-ok { width: 30px; height: 30px; border-radius: 50%; background: var(--hv4-mint); color: #1F9D6A; display: grid; place-items: center; flex: none; }
.hv4-ok svg { width: 16px; height: 16px; }
body .hv4 .hv4-tile-title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.hv4-tile--signals { grid-column: span 2; background: linear-gradient(160deg, #fff 40%, var(--hv4-mint)); }
.hv4-signals { list-style: none; margin: 0 0 auto; padding: 0 0 1.25rem; display: grid; gap: .55rem; padding-right: 5rem; }
.hv4-signals li { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; background: #fff; border: 1px solid rgba(15,23,42,.07); border-radius: 14px; box-shadow: 0 8px 18px -16px rgba(15,23,42,.4); }
.hv4-signals li:nth-child(2) { margin-left: 1.25rem; } .hv4-signals li:nth-child(3) { margin-left: 2.5rem; }
.hv4-signals b { display: block; font-size: .875rem; color: var(--hv4-ink); }
.hv4-signals small { display: block; font-size: .8rem; color: var(--hv4-ink-2); }
.hv4-sig-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.hv4-sig-ic svg { width: 16px; height: 16px; }
.hv4-sig-ic--g { background: var(--hv4-mint); color: #1F9D6A; } .hv4-sig-ic--b { background: var(--hv4-sky); color: #1B6FA8; } .hv4-sig-ic--p { background: var(--hv4-peach); color: #C2652A; }

/* Témoignage */
.hv4-tile--quote { grid-column: span 2; justify-content: space-between; }
body .hv4 .hv4-tile--quote blockquote { margin: 0 0 1.5rem; font-size: 1.2rem; line-height: 1.55; color: var(--hv4-ink); font-style: normal; font-weight: 500; }
.hv4-tile--quote figcaption { display: flex; align-items: center; gap: .85rem; }
.hv4-avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(93,211,158,.6); }
body .hv4 .hv4-tile--quote strong { display: block; color: var(--hv4-ink); font-size: 1rem; }
.hv4-tile--quote small { display: block; color: var(--hv4-ink-2); font-size: .875rem; }

/* Support : une vraie conversation, un vrai visage */
.hv4-tile--support { grid-column: span 2; }
.hv4-chat { display: grid; gap: .55rem; margin-bottom: auto; padding-bottom: 1.25rem; }
.hv4-bubble { justify-self: start; max-width: 80%; padding: .65rem .95rem; border-radius: 16px 16px 16px 4px; background: #F1F5F9; color: var(--hv4-ink); font-size: .925rem; }
.hv4-reply { justify-self: end; display: flex; align-items: flex-end; gap: .55rem; max-width: 88%; flex-direction: row-reverse; }
.hv4-reply img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff; }
.hv4-bubble--us { border-radius: 16px 16px 4px 16px; background: var(--hv4-grad); color: #fff; font-weight: 600; max-width: none; }
.hv4-chat-who { justify-self: end; margin-right: 3.1rem; font-size: .8125rem; color: var(--hv4-ink-2); }

/* 3. Bénéfices : chaque carte porte une mini-illustration */
.hv4-illu { height: 168px; border-radius: 18px; margin: -.5rem -.5rem 1.4rem; padding: 1.1rem; display: grid; place-items: center; overflow: hidden; }
.hv4-illu--mint { background: var(--hv4-mint); } .hv4-illu--sky { background: var(--hv4-sky); } .hv4-illu--peach { background: var(--hv4-peach); }
.hv4-mini-tasks { width: 100%; max-width: 280px; display: grid; gap: .45rem; }
.hv4-mini-tasks span { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; background: #fff; border-radius: 12px; font-size: .85rem; font-weight: 600; color: var(--hv4-ink); box-shadow: 0 6px 14px -12px rgba(15,23,42,.4); }
.hv4-mini-tasks small { margin-left: auto; font-weight: 500; color: var(--hv4-ink-2); }
.hv4-mini-tasks i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #CBD5E1; flex: none; }
.hv4-mini-tasks .is-done { color: #94A3B8; text-decoration: line-through; }
.hv4-mini-tasks .is-done i { border: 0; background: var(--hv4-grad); }
.hv4-mini-card { width: 100%; max-width: 280px; background: #fff; border-radius: 14px; padding: .85rem; display: grid; gap: .5rem; box-shadow: 0 10px 22px -16px rgba(15,23,42,.45); }
.hv4-mini-who { display: grid; grid-template-columns: 34px 1fr; column-gap: .6rem; align-items: center; font-size: .9rem; font-weight: 700; color: var(--hv4-ink); }
.hv4-mini-who b { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: #1A2233; color: #fff; display: grid; place-items: center; font-size: .75rem; }
.hv4-mini-who small { font-weight: 500; color: var(--hv4-ink-2); font-size: .8rem; }
.hv4-mini-chip { display: flex; align-items: center; gap: .45rem; padding: .4rem .6rem; border-radius: 10px; background: var(--hv4-sky); color: #1B6FA8; font-size: .8rem; font-weight: 600; transition: transform .3s ease; }
.hv4-mini-chip--2 { background: var(--hv4-mint); color: #1F7A55; }
.hv4-mini-chip svg { width: 14px; height: 14px; }
.hv4-mini-pipe { width: 100%; max-width: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.hv4-mini-pipe > span { background: rgba(255,255,255,.75); border-radius: 12px; padding: .5rem; min-height: 112px; display: grid; gap: .35rem; align-content: start; }
.hv4-mini-pipe small { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hv4-ink-2); }
.hv4-mini-pipe i { display: block; height: 26px; border-radius: 8px; background: #fff; box-shadow: 0 4px 10px -8px rgba(15,23,42,.45); }
.hv4-mini-pipe .is-won { background: #fff; box-shadow: inset 0 0 0 2px rgba(93,211,158,.6); }
.hv4-mini-pipe .is-won small { color: #1F9D6A; }
.hv4-mini-pipe .is-deal { display: grid; place-items: center; height: 34px; font-style: normal; font-size: .75rem; font-weight: 700; color: #fff; background: var(--hv4-grad); transition: transform .3s ease; }
.hv4-benefit:hover .hv4-mini-chip--2, .hv4-benefit:hover .is-deal { transform: translateY(-3px); }
.hv4-benefit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.hv4-benefit { padding: 1.5rem 1.5rem 1.75rem; border-radius: var(--radius-lg, 16px); border: 1px solid var(--color-border); background: #fff; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.hv4-benefit:hover { transform: translateY(-3px); border-color: #2B9FE8; }
.hv4-benefit h3 { font-size: 1.25rem; margin: 0 0 .6rem; color: var(--color-text); }
.hv4-benefit p { font-size: 1rem; line-height: 1.6; margin: 0 0 1.25rem; color: var(--color-text-secondary); flex: 1; }
.hv4-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #2B7DE9; text-decoration: none; }
.hv4-link svg { width: 16px; height: 16px; transition: transform .2s; }
.hv4-link:hover svg { transform: translateX(3px); }

/* 4. Deux formules */
.hv4 .hv4-plans { background: var(--hv4-cream); }
.hv4-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; max-width: 960px; margin: 0 auto; }
.hv4-plan-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
.hv4-plan { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); padding: 2.25rem 2rem 2rem; display: flex; flex-direction: column; }
.hv4-plan--pro { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--hv4-grad) border-box; box-shadow: 0 24px 48px -24px rgba(43,159,232,.35); }
.hv4-plan-badge { position: absolute; top: -.85rem; left: 2rem; padding: .3rem .85rem; border-radius: 9999px; background: var(--hv4-grad); color: #fff; font-size: .8125rem; font-weight: 700; }
.hv4-plan h3 { font-size: 1.5rem; margin: 0; color: var(--color-text); }
.hv4-plan-promise { font-size: 1.0625rem; font-weight: 600; color: var(--color-text); margin: .4rem 0 1.25rem; line-height: 1.45; }
.hv4-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.hv4-price-num { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--color-text); }
.hv4-plan--pro .hv4-price-num { background: var(--hv4-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv4-price-unit { font-size: .95rem; color: var(--color-text-secondary); }
.hv4-price-note { font-size: .875rem; color: var(--color-text-secondary); margin: .25rem 0 1.25rem; }
.hv4-plan-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .6rem; flex: 1; }
.hv4-plan-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .975rem; line-height: 1.45; color: var(--color-text); }
.hv4-plan-list svg { width: 18px; height: 18px; color: #5DD39E; flex: none; margin-top: 2px; }
.hv4-plan .btn-cta-primary, .hv4-plan .btn-cta-secondary { align-self: stretch; text-align: center; justify-content: center; }
.hv4-plan-more { text-align: center; margin: 2rem 0 0; color: var(--color-text-secondary); font-size: 1rem; }
.hv4-plan-more a { color: #2B7DE9; font-weight: 600; }

/* 5. Charik Pro chiffré */
.hv4-pro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center; }
.hv4-pro-copy h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2; margin: .75rem 0 1rem; color: var(--color-text); }
.hv4-pro-copy p { font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-secondary); margin: 0 0 1.75rem; }
.hv4-compare { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); padding: 1.75rem; box-shadow: 0 24px 48px -28px rgba(15,23,42,.25); }
.hv4-compare-title { margin: 0 0 1.25rem; font-weight: 700; color: var(--color-text); }
.hv4-compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hv4-compare-col { border-radius: 12px; padding: 1.1rem 1.1rem 1rem; background: #f8fafc; border: 1px solid var(--color-border); display: flex; flex-direction: column; }
.hv4-compare-col--charik { background: rgba(93,211,158,.08); border-color: rgba(43,159,232,.35); }
.hv4-compare-col h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-secondary); margin: 0 0 .75rem; }
.hv4-compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; flex: 1; align-content: start; }
.hv4-compare-col li { display: flex; justify-content: space-between; gap: .75rem; font-size: .9375rem; color: var(--color-text); }
.hv4-compare-col li b { font-weight: 600; white-space: nowrap; }
.hv4-compare-total { margin: .9rem 0 0; padding-top: .75rem; border-top: 1px solid var(--color-border); font-size: 1.5rem; font-weight: 800; color: var(--color-text); }
.hv4-compare-col--charik .hv4-compare-total { background: var(--hv4-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv4-compare-total small { font-size: .875rem; font-weight: 500; -webkit-text-fill-color: var(--color-text-secondary); color: var(--color-text-secondary); }
.hv4-compare-verdict { margin: 1.25rem 0 .5rem; font-weight: 700; color: #15803d; }
.hv4-compare-note { margin: 0; font-size: .8125rem; color: var(--color-text-secondary); line-height: 1.5; }

.hv4 .crm-lp-integ-note a { color: #2B7DE9; font-style: normal; font-weight: 600; }

/* 8. Garantie France */
.hv4 .hv4-france { padding: 2.25rem 0; background: #fff; border-top: 1px solid rgba(15,23,42,.06); }
.hv4-france-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; }
.hv4-france-list li { display: flex; align-items: center; gap: .6rem; color: var(--color-text-secondary); font-size: 1rem; }
.hv4-france-list strong { color: var(--color-text); }
.hv4-france-list svg { width: 20px; height: 20px; color: #2B9FE8; }

/* Mobile */
@media (max-width: 1024px) {
    .hv4-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv4-pro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 760px) {
    .hv4-benefit-grid, .hv4-plan-grid { grid-template-columns: 1fr; }
    .hv4-bento { grid-template-columns: 1fr; }
    .hv4-tile, .hv4-tile--rating, .hv4-tile--migration, .hv4-tile--quote, .hv4-tile--support { grid-column: auto; grid-row: auto; }
    .hv4-tile--migration { flex-direction: column; align-items: flex-start; }
    .hv4-compare-cols { grid-template-columns: 1fr; }
    .hv4-plan { padding: 2rem 1.5rem 1.5rem; }
    .hv4-france-list { flex-direction: column; align-items: flex-start; }
}

/* Autres fonds de la page : crème et blanc, jamais de gris froid */
.hv4 .crm-lp-faq { background: var(--hv4-cream); }
.hv4 .crm-lp-migration { background: linear-gradient(135deg, var(--hv4-mint), var(--hv4-sky)); }
.hv4 .hv4-benefit, .hv4 .hv4-plan, .hv4 .hv4-compare { border-color: rgba(15,23,42,.07); box-shadow: 0 18px 40px -26px rgba(15,23,42,.18); border-radius: 24px; }
.hv4 .hv4-plan--pro { border-color: transparent; }
.hv4-hero { background: radial-gradient(700px 420px at 85% 20%, rgba(93,211,158,.14), transparent 70%), radial-gradient(600px 400px at 10% 90%, rgba(255,186,120,.12), transparent 70%); }