/*
 * Cap Portage — Accueil V9 « Illustré clair ».
 * Direction : maquette claire validée par Kamel (2026-07-07) + style du
 * template email illustré. Fond blanc, titres Playfair navy, boutons bleus
 * arrondis, illustrations webp dans des pastilles bleu pâle, réassurance
 * factuelle (IDCC 3219, DREETS — jamais de chiffres inventés).
 */

.cp-home-v9{
  --v9-navy:#0A1628;
  --v9-blue:#2563EB;
  --v9-blue-dark:#1d4fd7;
  --v9-sky:#EFF6FF;
  --v9-sky-2:#F7FAFF;
  --v9-line:#E5ECF5;
  --v9-muted:#5B6B7E;
  --v9-gold:#C8A96B;
  --v9-green:#16A34A;
  background:#fff;
  color:var(--v9-navy);
}
.cp-home-v9 .v9-eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .8rem;border-radius:999px;
  background:#EEF6ED;color:#1A6B3C;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  margin-bottom:1rem;
}
.cp-home-v9 .v9-head{max-width:760px;margin:0 auto clamp(1.75rem,3vw,2.5rem);text-align:center}
.cp-home-v9 .v9-head h2{
  font-family:var(--font-display,'Playfair Display',Georgia,serif);
  font-size:clamp(1.55rem,2.5vw,2.1rem);line-height:1.2;margin:0 0 .6rem;color:var(--v9-navy);
}
.cp-home-v9 .v9-head p{color:var(--v9-muted);font-size:.98rem;line-height:1.65;margin:0}

/* ── 1. HERO ─────────────────────────────────────────────────── */
.cp-home-v9 .v9-hero{padding:calc(var(--navbar-h) + 2rem) 0 2.75rem;background:#fff}
.cp-home-v9 .v9-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.cp-home-v9 .v9-hero h1{
  font-family:var(--font-display,'Playfair Display',Georgia,serif);
  font-size:clamp(2rem,3.3vw,2.9rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--v9-navy);margin:0 0 1rem;
}
.cp-home-v9 .v9-hero__lead{font-size:1rem;line-height:1.65;color:var(--v9-muted);margin:0 0 1.5rem;max-width:480px}
.cp-home-v9 .v9-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem}
.cp-home-v9 .v9-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.5rem;border-radius:10px;font-weight:700;font-size:.92rem;
  text-decoration:none;transition:all .18s ease;border:1.5px solid transparent;
}
.cp-home-v9 .v9-btn--blue{background:var(--v9-blue);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.28)}
.cp-home-v9 .v9-btn--blue:hover{background:var(--v9-blue-dark);transform:translateY(-1px)}
.cp-home-v9 .v9-btn--outline{background:#fff;color:var(--v9-blue);border-color:#C7D8F2}
.cp-home-v9 .v9-btn--outline:hover{border-color:var(--v9-blue);background:var(--v9-sky)}
.cp-home-v9 .v9-hero__proof{display:flex;flex-wrap:wrap;gap:1.5rem}
.cp-home-v9 .v9-proof{display:flex;align-items:center;gap:.55rem}
.cp-home-v9 .v9-proof__icon{
  display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
  border:1.5px solid #C7D8F2;border-radius:50%;color:var(--v9-blue);font-size:.8rem;
}
.cp-home-v9 .v9-proof b{display:block;font-size:.88rem;color:var(--v9-navy);line-height:1.2}
.cp-home-v9 .v9-proof span{display:block;font-size:.72rem;color:var(--v9-muted)}
.cp-home-v9 .v9-hero__visual{position:relative}
.cp-home-v9 .v9-hero__blob{
  position:relative;border-radius:46% 54% 52% 48% / 48% 46% 54% 52%;
  background:linear-gradient(150deg,var(--v9-sky) 0%,#E3EEFF 100%);
  padding:clamp(.9rem,1.6vw,1.4rem);overflow:hidden;
}
.cp-home-v9 .v9-hero__img{
  display:block;width:100%;height:clamp(300px,40vh,430px);object-fit:cover;
  border-radius:42% 58% 50% 50% / 46% 44% 56% 54%;
}

/* ── 2. 4 ÉTAPES ─────────────────────────────────────────────── */
.cp-home-v9 .v9-steps-section{padding:clamp(2.75rem,5vw,3.75rem) 0;background:#fff}
.cp-home-v9 .v9-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;
  list-style:none;margin:0;padding:0;position:relative;counter-reset:v9step;
}
.cp-home-v9 .v9-steps::before{
  content:'';position:absolute;top:34px;left:calc(12.5% + 36px);right:calc(12.5% + 36px);
  border-top:2px dashed #C7D8F2;
}
.cp-home-v9 .v9-step{text-align:center;position:relative;padding:0 .5rem}
.cp-home-v9 .v9-step__icon{
  position:relative;display:grid;place-items:center;width:68px;height:68px;
  margin:0 auto 1rem;border-radius:50%;background:#fff;
  border:1.5px solid #C7D8F2;color:var(--v9-blue);
}
.cp-home-v9 .v9-step__icon .dashicons{width:28px;height:28px;font-size:28px}
.cp-home-v9 .v9-step h3{font-size:.98rem;margin:0 0 .4rem;color:var(--v9-navy)}
.cp-home-v9 .v9-step h3::before{counter-increment:v9step;content:counter(v9step) ". "}
.cp-home-v9 .v9-step p{font-size:.83rem;line-height:1.55;color:var(--v9-muted);margin:0}

/* ── 3. SECTEURS ─────────────────────────────────────────────── */
.cp-home-v9 .v9-sectors{padding:clamp(2.25rem,4vw,3rem) 0;background:var(--v9-sky-2);border-block:1px solid var(--v9-line)}
.cp-home-v9 .v9-sectors__grid{display:grid;grid-template-columns:.9fr 2.1fr;gap:clamp(1.75rem,3.5vw,3rem);align-items:center}
.cp-home-v9 .v9-sectors h2{
  font-family:var(--font-display,'Playfair Display',Georgia,serif);
  font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25;margin:0 0 .6rem;
}
.cp-home-v9 .v9-sectors__intro p{font-size:.88rem;line-height:1.6;color:var(--v9-muted);margin:0 0 .9rem}
.cp-home-v9 .v9-sectors__link{font-size:.85rem;font-weight:700;color:var(--v9-blue);text-decoration:none}
.cp-home-v9 .v9-sectors__link:hover{text-decoration:underline}
.cp-home-v9 .v9-sector-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.cp-home-v9 .v9-sector-item{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:.85rem .4rem;border-radius:14px;text-decoration:none;text-align:center;
  transition:background .18s ease;
}
.cp-home-v9 .v9-sector-item:hover{background:#fff;box-shadow:0 8px 24px rgba(11,57,119,.08)}
.cp-home-v9 .v9-sector-item .dashicons{width:30px;height:30px;font-size:30px;color:var(--v9-blue)}
.cp-home-v9 .v9-sector-item span{font-size:.78rem;font-weight:600;color:var(--v9-navy);line-height:1.3}

/* ── 4. OFFRES ───────────────────────────────────────────────── */
.cp-home-v9 .v9-offers{padding:clamp(2.75rem,5vw,3.75rem) 0;background:#fff}
.cp-home-v9 .v9-offers__grid{
  display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:0 auto;
  border:1px solid var(--v9-line);border-radius:18px;overflow:hidden;
}
.cp-home-v9 .v9-offer{padding:clamp(1.5rem,3vw,2.25rem)}
.cp-home-v9 .v9-offer + .v9-offer{border-left:1px solid var(--v9-line)}
.cp-home-v9 .v9-offer h3{font-size:1.15rem;margin:0 0 .5rem;color:var(--v9-blue)}
.cp-home-v9 .v9-offer--premium h3{color:var(--v9-gold)}
.cp-home-v9 .v9-offer__desc{font-size:.85rem;line-height:1.6;color:var(--v9-muted);margin:0 0 1.1rem}
.cp-home-v9 .v9-offer ul{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.55rem}
.cp-home-v9 .v9-offer li{display:flex;align-items:baseline;gap:.55rem;font-size:.86rem;color:var(--v9-navy)}
.cp-home-v9 .v9-offer li::before{content:'✓';font-weight:800;color:var(--v9-green);flex:0 0 auto}
.cp-home-v9 .v9-offer__link{font-size:.85rem;font-weight:700;color:var(--v9-blue);text-decoration:none}
.cp-home-v9 .v9-offer--premium .v9-offer__link{color:var(--v9-gold)}
.cp-home-v9 .v9-offer__link:hover{text-decoration:underline}

/* ── 5. SIMULATEUR ───────────────────────────────────────────── */
.cp-home-v9 .v9-sim{padding:clamp(2.5rem,4.5vw,3.5rem) 0;background:var(--v9-sky-2);border-block:1px solid var(--v9-line)}
.cp-home-v9 .v9-sim .v9-head{margin-bottom:1.5rem}
/* Le panneau navy du simulateur ressort en carte de marque sur fond clair. */
.cp-home-v9 .simulator{padding:0;background:transparent}
.cp-home-v9 .simulator__results{box-shadow:0 24px 70px rgba(11,57,119,.16)!important}

/* ── 6. ACCOMPAGNEMENT HUMAIN (3 cartes illustrées) ──────────── */
.cp-home-v9 .v9-human{padding:clamp(2.75rem,5vw,3.75rem) 0;background:#fff}
.cp-home-v9 .v9-human__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem)}
.cp-home-v9 .v9-human-card{text-align:center}
.cp-home-v9 .v9-human-card__blob{
  width:min(100%,300px);margin:0 auto 1.1rem;aspect-ratio:4/3;
  border-radius:50% 50% 48% 52% / 55% 55% 45% 45%;
  background:linear-gradient(155deg,var(--v9-sky) 0%,#E7F0FF 100%);
  overflow:hidden;display:grid;place-items:center;padding:.6rem;
}
.cp-home-v9 .v9-human-card__blob img{
  width:100%;height:100%;object-fit:cover;
  border-radius:48% 52% 50% 50% / 52% 50% 50% 48%;
}
.cp-home-v9 .v9-human-card h3{font-size:1rem;margin:0 0 .4rem;color:var(--v9-navy)}
.cp-home-v9 .v9-human-card p{font-size:.85rem;line-height:1.6;color:var(--v9-muted);margin:0;max-width:320px;margin-inline:auto}

/* ── 7. AVANTAGES ────────────────────────────────────────────── */
.cp-home-v9 .v9-benefits{padding:clamp(2.5rem,4.5vw,3.25rem) 0;background:#fff;border-top:1px solid var(--v9-line)}
.cp-home-v9 .v9-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem 2rem;max-width:1040px;margin:0 auto}
.cp-home-v9 .v9-benefit{display:flex;gap:.85rem;align-items:flex-start}
.cp-home-v9 .v9-benefit .dashicons{
  flex:0 0 auto;width:38px;height:38px;font-size:20px;
  display:grid;place-items:center;border-radius:50%;
  border:1.5px solid #C7D8F2;color:var(--v9-blue);
}
.cp-home-v9 .v9-benefit b{display:block;font-size:.9rem;color:var(--v9-navy);margin-bottom:.2rem}
.cp-home-v9 .v9-benefit p{font-size:.8rem;line-height:1.55;color:var(--v9-muted);margin:0}

/* ── 8. FAQ ──────────────────────────────────────────────────── */
.cp-home-v9 .v9-faq{padding:clamp(2.5rem,4.5vw,3.25rem) 0;background:var(--v9-sky-2);border-top:1px solid var(--v9-line)}
.cp-home-v9 .v9-faq__items{columns:2;column-gap:1.25rem;max-width:1000px;margin:0 auto}
.cp-home-v9 .v9-faq__items .faq__item{
  break-inside:avoid;margin-bottom:.9rem;background:#fff;
  border:1px solid var(--v9-line);border-radius:12px;
}
.cp-home-v9 .v9-faq__more{text-align:center;margin-top:1.25rem}
.cp-home-v9 .v9-faq__more a{font-size:.88rem;font-weight:700;color:var(--v9-blue);text-decoration:none}
.cp-home-v9 .v9-faq__more a:hover{text-decoration:underline}

/* ── 9. CTA FINAL ────────────────────────────────────────────── */
.cp-home-v9 .v9-cta{padding:clamp(2.5rem,4.5vw,3.25rem) 0;background:linear-gradient(150deg,var(--v9-sky) 0%,#E3EEFF 100%)}
.cp-home-v9 .v9-cta__inner{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(1.75rem,3.5vw,3rem);align-items:center}
.cp-home-v9 .v9-cta h2{
  font-family:var(--font-display,'Playfair Display',Georgia,serif);
  font-size:clamp(1.45rem,2.3vw,1.9rem);line-height:1.2;margin:0 0 .6rem;
}
.cp-home-v9 .v9-cta p{font-size:.92rem;line-height:1.6;color:var(--v9-muted);margin:0}
.cp-home-v9 .v9-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:1024px){
  .cp-home-v9 .v9-steps{grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem}
  .cp-home-v9 .v9-steps::before{display:none}
  .cp-home-v9 .v9-sector-row{grid-template-columns:repeat(3,1fr)}
  .cp-home-v9 .v9-sectors__grid{grid-template-columns:1fr}
  .cp-home-v9 .v9-benefit-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .cp-home-v9 .v9-hero__grid{grid-template-columns:1fr}
  .cp-home-v9 .v9-hero__visual{order:-1}
  .cp-home-v9 .v9-hero__img{height:clamp(220px,32vh,300px)}
  .cp-home-v9 .v9-human__grid{grid-template-columns:1fr}
  .cp-home-v9 .v9-offers__grid{grid-template-columns:1fr}
  .cp-home-v9 .v9-offer + .v9-offer{border-left:0;border-top:1px solid var(--v9-line)}
  .cp-home-v9 .v9-faq__items{columns:1}
  .cp-home-v9 .v9-cta__inner{grid-template-columns:1fr}
  .cp-home-v9 .v9-cta__actions{justify-content:flex-start}
  .cp-home-v9 .v9-benefit-grid{grid-template-columns:1fr}
  .cp-home-v9 .v9-steps{grid-template-columns:1fr}
}