/* ════════════════════════════════════════════════════════════════════════════
   home2.css — style de la nouvelle page d'accueil (index.html, ex-home2.html ; PDF « home validé 7 octobre »)
   Ne contient que ce qui est PROPRE à cette page (classes .hm-*). Tout le reste vient des composants partagés :
   boutons (header.css), cartes .bc et onglets .univ-tab (bc-cards.css), cartes photo d'univers .univ-photo (bc-cards.css),
   cartes d'articles (bc-cards.css + js/articles.js). Aucun sélecteur global (.stitle, .kicker, .btn-teal…) : voir CLAUDE.md §6.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --hm-greige:#efe9e5;   /* fond de la section « catalogue » et fin du fondu du héros (relevé sur la maquette) */
  --hm-lav-ink:#7c779a;  /* titres des engagements */
  --hm-blue:#668CC2;     /* kicker du catalogue, bandeau d'appel (bleu d'« Espace client ») */
  --hm-news:#1c3869;     /* kicker et texte des onglets (bleu nuit de la maquette) */
}

.hm-wrap{max-width:1280px;margin:0 auto}

/* ── Éléments communs : surtitre, titre, chapeau, en-tête de section ── */
.hm-kicker{font-size:var(--ty-h4-size);font-weight:500;text-transform:uppercase;line-height:1.3;margin-bottom:10px}
.hm-kicker-brique{color:var(--bil-d,#b54d40)}
.hm-kicker-blue{color:var(--hm-blue)}
.hm-kicker-navy{color:var(--navy,#1c1c36)}
.hm-kicker-news{color:var(--hm-news)}
.hm-title{font-size:var(--ty-h2-size);font-weight:800;line-height:1.15;color:var(--navy,#1c1c36);letter-spacing:-.5px}
.hm-desc{font-size:var(--ty-body);line-height:1.6;color:var(--navy,#1c1c36);max-width:620px;margin-top:14px}
.hm-univers .hm-desc{max-width:470px}   /* coupe après « Nunc gravida », comme la maquette */
.hm-eng .hm-desc{max-width:none}          /* une seule ligne, comme la maquette */
.hm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;margin-bottom:48px}
.hm-btn-sm{flex-shrink:0;white-space:nowrap}

/* ── HÉROS : photo plein cadre ── */
.hero-home2{
  background-color:#bc9f89;   /* repli pendant le chargement : teinte du mur */
  /* photo seule : le fondu vers le greige en bas du héros a été retiré le 2026-10-20 (demande de l'utilisateur) */
  background-image:url('../images/home2-hero.jpg');
  background-size:cover;background-position:center 40%;background-repeat:no-repeat;
  padding-left:2.5rem;padding-right:2.5rem;
}
/* header.css pose padding-haut:294px, padding-bas:220px et height:869px sur tous les héros ; ici le texte démarre plus haut (180 px, demande de l'utilisateur).
   Le bloc « Votre profil » (3 cartes) a été retiré le 2026-10-20 sur décision de la direction : le héros reprend la hauteur commune (869 px ≥ 1101 px). */
body.nav-overlay section.hero-home2,body.nav-solid section.hero-home2{padding-top:180px;padding-bottom:56px}
.hero-home2 .hero-inner{width:100%;max-width:1280px;margin:0 auto}
.hero-home2 h1{margin-bottom:36px}                 /* titre → sous-titre : 20 px → 36 px (demande du 2026-10-22) */
.hero-home2 h1 em{font-style:normal;font-weight:400;color:var(--pro,#993d4a)}
.hero-home2 .hero-sub{max-width:700px;font-size:var(--ty-h3-size);line-height:1.5;margin-bottom:48px}   /* sous-titre → boutons : 28 px → 48 px */
.hero-home2 .hero-actions{margin-bottom:0}
.hero-home2 .btn-teal{background:var(--pro,#993d4a);color:#fff}
.hero-home2 .btn-teal:hover,.hero-home2 .btn-teal:focus-visible{background:var(--pro,#993d4a);color:var(--pro,#993d4a);outline:1.5px solid var(--pro,#993d4a);outline-offset:-1.5px;box-shadow:0 6px 20px color-mix(in srgb,var(--pro,#993d4a) 35%,transparent)}

/* ── BANDEAU DE CHIFFRES ── */
.hm-stats{background:var(--pro,#993d4a);color:#fff;padding:44px 2.5rem}
.hm-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.hm-stat-num{font-size:2.5rem;font-weight:800;line-height:1.05;letter-spacing:-1px;white-space:nowrap}   /* un nombre ne se coupe pas (« 100 / 000 ») */
.hm-stat-num em{font-style:normal}
.hm-stat-lbl{font-size:var(--ty-xs);font-weight:500;text-transform:uppercase;letter-spacing:.4px;margin-top:8px}

/* ── NOS UNIVERS (grille .univ-photo-grid : bc-cards.css) ── */
.hm-univers{background:#fff;padding:96px 2.5rem 104px}   /* fond blanc demandé par l'utilisateur (la maquette avait le greige) */

/* ── CATALOGUE ── */
.hm-cat{background:var(--hm-greige);padding:96px 2.5rem 104px}
.hm-cat .univ-tabs{margin:38px 0 32px}   /* index.css : margin-bottom:32px */
/* onglets : AUCUNE surcharge de couleur — ce sont les onglets .univ-tab du site (bc-cards.css), identiques à index.html : décision de l'utilisateur, 2026-10-09 */
.hm-cat .univ-tab:focus-visible{outline:3px solid var(--navy,#1c1c36);outline-offset:2px}

.hm-cat .bento{grid-template-columns:repeat(3,1fr);gap:24px}
/* Cartes : AUCUNE surcharge — ce sont les cartes .bc du site (bc-cards.css), posées sur le fond greige, à la demande de l'utilisateur ;
   la carte finale est le .bc-all standard (libellé et lien donnés par data-all-label / data-all-href). */

/* ── ENGAGEMENTS ── */
.hm-eng{background:#fff;padding:88px 2.5rem 96px}   /* fond blanc demandé par l'utilisateur (la maquette avait un lavande clair #eeeaf2) */
.hm-eng-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 72px;margin-top:56px}
.hm-eng-item{display:flex;gap:18px;align-items:flex-start}
.hm-eng-ico{width:26px;height:26px;flex-shrink:0;margin-top:3px;color:var(--navy,#1c1c36)}
.hm-eng-title{font-size:var(--ty-h4-size);font-weight:600;line-height:1.3;color:var(--hm-lav-ink);margin-bottom:6px}
.hm-eng-desc{font-size:var(--ty-body);line-height:1.55;color:var(--navy,#1c1c36)}

/* ── TÉMOIGNAGE : bulle avec pointe en bas à droite ── */
.hm-quote-sec{background:var(--hm-greige);padding:88px 2.5rem 98px}   /* 98 = pointe de la bulle (34) + 64 ; le padding, pas une marge (elle s'échapperait de la section) */   /* fond = celui du catalogue, bulle blanche : demandé par l'utilisateur */
.hm-quote{position:relative;margin:0;background:#fff;border-radius:28px;padding:30px 84px 38px 80px}
.hm-quote::after{content:'';position:absolute;right:64px;bottom:-34px;width:40px;height:34px;background:#fff;clip-path:polygon(0 0,100% 0,100% 100%)}
.hm-q-open,.hm-q-close{position:absolute;width:24px;height:22px;color:var(--navy,#1c1c36)}
.hm-q-open{left:30px;top:28px}
.hm-q-close{right:30px;bottom:44px}
.hm-q-text{font-size:var(--ty-h4-size);font-weight:600;line-height:1.5;color:var(--navy,#1c1c36);margin:0}
.hm-q-attr{font-size:var(--ty-xs);color:var(--navy,#1c1c36);margin-top:6px;text-align:right}

/* ── ACTUALITÉS (cartes .bc.bc-media du registre js/articles.js) ── */
.hm-news{background:#fff;padding:96px 2.5rem 104px}
.hm-news .bento{grid-template-columns:repeat(3,1fr);gap:24px}

/* ── APPEL À L'ACTION ── */
.hm-cta{background:var(--hm-blue);color:#fff;padding:88px 2.5rem}
.hm-cta-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem;flex-wrap:wrap}
.hm-cta-h{font-size:48px;font-weight:800;line-height:1.2;color:#fff;letter-spacing:0}   /* exception locale : aucun palier à 48 px (maquette) */
.hm-cta-h em{display:block;font-style:italic;font-weight:300;margin-top:4px}
.hm-cta-sub{font-size:var(--ty-body);line-height:1.6;margin-top:22px;max-width:500px}
.hm-cta .btn-white{color:var(--hm-blue)}
.hm-cta .btn-white:hover,.hm-cta .btn-white:focus-visible{color:#fff}

/* ── Tablette ── */
@media(max-width:1100px){
  .hm-stats-grid{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .hm-eng-grid{gap:36px 40px}
  .hm-cat .bento,.hm-news .bento{grid-template-columns:repeat(2,1fr)}
  .hm-quote{padding-left:72px;padding-right:76px}
}

/* ── Mobile ── */
@media(max-width:768px){
  .hero-home2{padding-left:1.25rem;padding-right:1.25rem}
  body.nav-overlay section.hero-home2,body.nav-solid section.hero-home2{padding-top:124px;padding-bottom:56px}   /* marges de héros du téléphone (header.css) */
  /* voile sombre léger sur téléphone : le texte blanc recouvre le sujet clair de la photo (contraste ≈ 2:1 sur le mur beige) ; « assurances, » passe en rose clair pour rester lisible sur le voile */
  .hero-home2{background-image:linear-gradient(rgba(22,22,44,.4),rgba(22,22,44,.4)),url('../images/home2-hero.jpg')}
  .hero-home2 h1 em{color:color-mix(in srgb,var(--pro,#993d4a) 30%,#fff)}
  .hm-stats,.hm-univers,.hm-cat,.hm-eng,.hm-cta{padding-left:1.25rem;padding-right:1.25rem}
  .hm-btn-sm{white-space:normal}   /* « Voir toutes nos solutions → » dépassait de 8 px à 320 px */
  .hm-quote-sec,.hm-news{padding-left:1.25rem;padding-right:1.25rem}
  .hm-univers,.hm-cat{padding-top:64px;padding-bottom:72px}
  .hm-eng{padding-top:64px;padding-bottom:72px}
  .hm-head{flex-direction:column;gap:20px;margin-bottom:32px}
  .hm-br{display:none}
  .hm-eng-grid{grid-template-columns:1fr;margin-top:36px}
  .hm-cat .bento,.hm-news .bento{grid-template-columns:1fr}
  .hm-quote{padding:26px 24px 30px 24px}
  .hm-quote-sec{padding-top:64px;padding-bottom:76px}
  .hm-news{padding-top:64px;padding-bottom:72px}
  .hm-q-open,.hm-q-close{display:none}
  .hm-q-attr{text-align:left}
  .hm-quote::after{right:36px}
  .hm-cta{padding-top:64px;padding-bottom:64px}
  .hm-cta-h{font-size:var(--ty-h2-size)}
}
@media(max-width:480px){
  .hm-stats-grid{gap:24px 16px}
  .hm-stat-num{font-size:clamp(1.75rem,8vw,2.5rem)}   /* « 100 000 » / « 225 000 » (40 px = 165 px de large) ne tiennent pas dans une colonne de 120–150 px à 320–375 px */
  }

/* Témoignage masqué (lorem, [data-lorem] dans global.css, 2026-10-27) : les actualités prennent son fond pour garder l'alternance blanc / greige. */
.hm-quote-sec[data-lorem] + .hm-news{background:var(--hm-greige)}