/* courtiers.html — page CORIM Assurances (courtier grossiste).
   Pile CSS : global.css (tokens, body, .w, grad-bar) + header.css (nav, boutons, héros, kicker/stitle, pied de page)
   + bc-cards.css (cartes produit). Ce fichier ne contient que ce qui est propre à la page.
   « Courtiers » n'est pas un univers coloré : accent = lavande de marque (--lavande), jamais l'ancien bleu d'interface. */

/* les sections portent déjà le gutter de 2.5rem : on neutralise le padding du .w global */
.w{padding:0}

/* ── HÉROS : hero-cible est défini dans header.css (plus de hero-split : les chiffres sont passés dans le bandeau ci-dessous, 2026-10-28) ── */

/* ── CHIFFRES CLÉS : même bandeau que les pages produit (règles reprises de produit.css, qui n'est pas chargé ici
   car ses .pq-card / .cta entreraient en conflit avec ceux de cette page) ; compteurs = js/stats-band.js ── */
.stats-band{background:var(--lavande-d);color:#fff;padding:44px 2.5rem}
.stats-band-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px}
.stats-band .hs-num{font-size:2.5rem;font-weight:800;line-height:1.05;letter-spacing:-1px;text-align:left;margin:0;color:#fff}
.stats-band .hs-lbl{font-size:var(--ty-xs);font-weight:500;letter-spacing:.4px;text-transform:uppercase;text-align:left;color:#fff;margin-top:8px}
@media(max-width:768px){.stats-band{padding:36px 1.25rem}.stats-band-grid{gap:24px 16px}}

/* ── Intro de section (remplace les style="" en ligne) ── */
.sec-intro{font-size:var(--ty-xs);color:var(--text2);font-weight:300;line-height:1.7;max-width:560px}

/* ── AVANTAGES ── */
.avantages{background:var(--white);padding:80px 2.5rem}
.pq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.pq-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;align-items:flex-start;gap:20px;transition:box-shadow .2s,transform .2s}
.pq-card:hover{box-shadow:0 8px 28px color-mix(in srgb,var(--lavande) 18%,transparent);transform:translateY(-2px)}
.pq-ico{flex-shrink:0;width:52px;height:52px;border-radius:var(--r-md);background:color-mix(in srgb,var(--lavande) 14%,#fff);display:flex;align-items:center;justify-content:center}
.pq-ico svg{width:24px;height:24px;stroke:var(--lavande-d);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pq-right{flex:1}
.pq-title{font-size:var(--ty-body);font-weight:600;color:var(--text);margin-bottom:6px}
.pq-desc{font-size:var(--ty-xs);font-weight:300;color:var(--text2);line-height:1.7}

/* ── GAMME : cartes .bc du catalogue (js/products.js, data-related) ── */
.gamme{background:var(--bg2);padding:80px 2.5rem}
.gamme .bento{margin-top:36px;grid-template-columns:repeat(5,1fr)}  /* 5 offres = 1 rangée (Assistance Immeuble ajoutée le 2026-10-28) */
@media(max-width:1280px){.gamme .bento{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.gamme .bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.gamme .bento{grid-template-columns:1fr}}

/* ── IDENTITÉ CORIM ── */
.corim-id{background:var(--bg);padding:64px 2.5rem}
.corim-id-inner{max-width:860px;margin:0 auto;text-align:center}
.corim-id .kicker{text-align:center}
.corim-id-h{font-size:var(--ty-h3-size);font-weight:700;color:var(--text);margin-bottom:12px;letter-spacing:-.3px}
.corim-id-desc{font-size:var(--ty-body);font-weight:300;color:var(--text2);line-height:1.8;max-width:680px;margin:0 auto}
.corim-id-desc strong{font-weight:600;color:var(--text)}
.corim-id-logo{display:block;width:220px;max-width:60%;height:auto;margin:36px auto 0}   /* logo CORIM Assurances (PNG noir, fond transparent) centré sous le texte */

/* ── ÉTAPES ── */
.steps{background:var(--white);padding:80px 2.5rem}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-top:36px}
.step{padding:36px 32px;border-right:1px solid var(--border);position:relative}
.step:last-child{border-right:none}
.step-num{font-size:48px;color:var(--lavande);line-height:1;margin-bottom:16px;font-weight:700}
.step-title{font-size:var(--ty-body);font-weight:600;color:var(--text);margin-bottom:8px}
.step-desc{font-size:var(--ty-xs);font-weight:300;color:var(--text2);line-height:1.65}
.step-arrow{position:absolute;top:50%;right:-12px;transform:translateY(-50%);width:24px;height:24px;background:var(--white);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--ty-xs);color:var(--lavande);z-index:1}

/* ── BANDEAU FINAL ── */
.cta{background:var(--lavande);padding:80px 2.5rem;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;bottom:-40px;right:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08)}
.cta-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:3rem;position:relative;z-index:1}
.cta-h{font-size:var(--ty-h2-size);font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.5px;max-width:560px}
.cta-sub{font-size:var(--ty-body);color:#fff;margin-top:10px;font-weight:300}
.cta-btns{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap}

/* ── MOBILE ── */
/* bandeau final : empilé dès 1100px (deux boutons de 570px ne rétrécissent pas, le titre était écrasé entre 769 et 940px) */
@media(max-width:1100px){
  .cta-inner{flex-direction:column;align-items:flex-start}
}

@media(max-width:768px){
  .avantages,.gamme,.corim-id,.steps,.cta{padding-left:1.25rem;padding-right:1.25rem}
  .pq-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr;border-radius:var(--r-lg)}
  .step{border-right:none;border-bottom:1px solid var(--border)}
  .step:last-child{border-bottom:none}
  .step-arrow{display:none}
}

/* ── HÉROS photo de la DA (2026-10-29, HEREO CORIM-01 converti en JPEG) ; remplace l'image commune de .hero-cible (header.css) ── */
/* photo très claire : voile marine côté texte, sinon le titre et les liens blancs du menu sont illisibles */
.hero-cible{background:linear-gradient(to right,rgba(28,28,54,.62) 0%,rgba(28,28,54,.38) 50%,rgba(28,28,54,.08) 80%),url('../images/hero-courtiers.jpg') center center/cover no-repeat}