/* Black IP 360 — moteur de landing : les 10 sections.
   Chaque règle est dérivée d'un attribut style= de Landing.dc.html, à l'identique. Les
   styles du design sont en ligne ; les sortir en classes est ce qui rend le responsive
   possible, puisque le design fige par exemple le H1 à 54px et qu'un style en ligne ne se
   surcharge pas en media query sans !important.
   Préfixe `bip-l-` pour ne pas empiéter sur les classes du design system. */

/* ============ Conteneurs ============ */
.bip-l-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.bip-l-wrap--narrow{ max-width:900px; }
.bip-l-wrap--cta{ max-width:820px; text-align:center; }

.bip-l-sec{ padding:96px 0; background:#fff; }
.bip-l-sec--grey{ background:var(--bip-grey); }
.bip-l-sec--dark{ background:var(--bip-charcoal); color:#fff; }
.bip-l-sec--100{ padding:100px 0; }
.bip-l-sec--76{ padding:76px 0; }

/* En-têtes de section */
.bip-l-head{ max-width:760px; }
.bip-l-head--center{ max-width:720px; margin:0 auto 48px; text-align:center; }
.bip-l-head--sol{ max-width:760px; margin:0 auto 52px; text-align:center; }
.bip-l-head--left{ max-width:720px; margin:0 0 48px; }
.bip-l-head--how{ max-width:720px; margin:0 auto 54px; text-align:center; }
.bip-l-h2{ color:var(--bip-ink); margin:16px 0 14px; }
.bip-l-intro{ font-size:19px; line-height:1.6; color:var(--bip-text); margin:0 0 44px; }
.bip-l-intro--flush{ margin:0; }
.bip-l-intro--muted{ font-size:18px; color:var(--bip-muted); margin:0; line-height:1.6; }

/* ============ 1. Hero ============ */
.bip-l-hero{ background:#fff; padding:66px 0 20px; }
.bip-l-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.bip-l-hero__h1{ font-size:54px; line-height:1.07; letter-spacing:-.5px; color:var(--bip-ink); margin:20px 0 0; }
.bip-l-hero__sub{ font-size:20px; line-height:1.6; color:var(--bip-muted); max-width:34em; margin:22px 0 32px; }
.bip-l-hero__ctas{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.bip-l-hero__seehow{ color:var(--bip-blue); font-weight:700; display:inline-flex; align-items:center; gap:9px; padding:8px 4px; }
.bip-l-hero__reassure{ margin-top:16px; font-size:14px; color:var(--bip-muted); display:flex; align-items:center; gap:8px; }
.bip-l-hero__visual{ position:relative; height:450px; border-radius:18px; overflow:hidden; box-shadow:var(--bip-shadow-lg); border:1px solid var(--bip-border); }
.bip-l-hero__img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Pastille de crédit, reprise au caractère près de `.credit` dans image-slot.js. Elle n'est
   pas décorative : les conditions d'Unsplash interdisent d'afficher leurs photos sans
   attribution. Elle disparaîtra avec les vraies photos (tâche 14). */
.bip-l-hero__credit{ position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:3px 7px; border-radius:5px; background:rgba(0,0,0,.55); color:#fff; font:10px/1.2 system-ui,-apple-system,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; backdrop-filter:blur(6px); }
.bip-l-hero__credit a{ color:inherit; text-decoration:none; }
.bip-l-hero__credit a:hover,
.bip-l-hero__credit a:focus-visible{ text-decoration:underline; }

/* ============ Barre « En bref » ============ */
.bip-l-chips{ background:#fff; padding:22px 0 40px; }
.bip-l-chips__row{ max-width:1180px; margin:0 auto; padding:20px 24px 0; border-top:1px solid var(--bip-border); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.bip-l-chips__label{ font-weight:700; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--bip-muted); margin-right:4px; }
.bip-l-chip{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--bip-border); border-radius:999px; padding:9px 15px; font-weight:600; font-size:14px; color:var(--bip-ink); }
.bip-l-chip__dot{ width:7px; height:7px; border-radius:999px; background:var(--bip-blue); }

/* ============ 2. Le problème ============ */
.bip-l-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.bip-l-prob{ background:#fff; border:1px solid var(--bip-border); border-radius:14px; padding:26px; }
.bip-l-prob__num{ width:42px; height:42px; border-radius:11px; background:rgba(42,58,242,.09); color:var(--bip-blue); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-family:var(--bip-font-heading); font-weight:800; font-size:16px; }
.bip-l-prob__title{ font-family:var(--bip-font-heading); font-weight:700; font-size:18px; color:var(--bip-ink); margin:0 0 8px; }
.bip-l-prob__text{ margin:0; color:var(--bip-muted); font-size:15px; line-height:1.55; }

/* ============ 3. Les conséquences ============ */
.bip-l-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.bip-l-cons{ text-align:center; padding:12px; }
.bip-l-cons__ic{ width:54px; height:54px; border-radius:14px; background:var(--bip-grey); color:var(--bip-blue); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.bip-l-cons__title{ font-family:var(--bip-font-heading); font-weight:700; font-size:19px; color:var(--bip-ink); margin:0 0 8px; }
.bip-l-cons__text{ margin:0; color:var(--bip-muted); font-size:15px; line-height:1.6; }
.bip-l-kicker{ text-align:center; font-size:18px; color:var(--bip-ink); font-weight:600; margin:44px auto 0; max-width:44em; }

/* ============ 4. Notre solution ============ */
.bip-l-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.bip-l-sol{ display:grid; grid-template-columns:auto 1fr; gap:20px; background:#fff; align-items:start; }
.bip-l-sol__ic{ width:52px; height:52px; border-radius:13px; background:rgba(42,58,242,.09); color:var(--bip-blue); display:flex; align-items:center; justify-content:center; }
.bip-l-sol__title{ font-family:var(--bip-font-heading); font-weight:700; font-size:20px; color:var(--bip-ink); margin:0 0 6px; }
.bip-l-sol__text{ margin:0 0 12px; color:var(--bip-muted); font-size:15px; line-height:1.55; }
.bip-l-sol__tags{ font-size:13px; color:var(--bip-muted); }

/* ============ 5. Les bénéfices ============ */
.bip-l-grid3--tight{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bip-l-ben{ display:flex; gap:16px; align-items:flex-start; padding:24px; border:1px solid var(--bip-border); border-radius:14px; }
.bip-l-check{ flex:none; display:inline-flex; width:32px; height:32px; border-radius:999px; background:var(--bip-blue); color:#fff; align-items:center; justify-content:center; margin-top:2px; }
.bip-l-check--sm{ width:30px; height:30px; margin-top:1px; }
.bip-l-ben__title{ font-family:var(--bip-font-heading); font-weight:700; font-size:18px; color:var(--bip-ink); margin:0 0 4px; }
.bip-l-ben__text{ margin:0; color:var(--bip-muted); font-size:15px; line-height:1.5; }

/* ============ 6. Pourquoi Black IP 360 ============ */
.bip-l-why__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.bip-l-why__h2{ margin:18px 0 16px; }
.bip-l-why__intro{ font-size:18px; line-height:1.6; color:rgba(255,255,255,.78); margin:0 0 28px; }
.bip-l-why__cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bip-l-why__card{ padding:22px; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(255,255,255,.03); }
.bip-l-why__title{ font-family:var(--bip-font-heading); font-weight:700; font-size:17px; margin-bottom:6px; }
.bip-l-why__text{ color:rgba(255,255,255,.66); font-size:14px; line-height:1.55; }

/* ============ 7. Comment ça fonctionne ============ */
.bip-l-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.bip-l-step__num{ font-family:var(--bip-font-heading); font-weight:800; font-size:44px; color:var(--bip-blue); opacity:.9; line-height:1; }
.bip-l-step__title{ font-family:var(--bip-font-heading); font-weight:700; font-size:19px; color:var(--bip-ink); margin:14px 0 8px; }
.bip-l-step__text{ margin:0; color:var(--bip-muted); font-size:15px; line-height:1.55; }

/* ============ 8. Engagements ============ */
.bip-l-eng{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:44px; }
.bip-l-eng__card{ background:#fff; border:1px solid var(--bip-border); border-radius:14px; padding:26px; display:flex; gap:14px; align-items:flex-start; }
.bip-l-eng__title{ font-weight:700; color:var(--bip-ink); font-size:16px; }
.bip-l-eng__text{ color:var(--bip-muted); font-size:14px; line-height:1.5; }

/* ============ 9. FAQ ============ */
.bip-l-faq{ display:flex; flex-direction:column; gap:14px; }
.bip-l-faq__head{ text-align:center; margin-bottom:48px; }
.bip-l-faq__head .bip-h2{ color:var(--bip-ink); margin:16px 0 0; }
.bip-faq__item{ background:#fff; border:1px solid var(--bip-border); border-radius:12px; overflow:hidden; }
.bip-faq__h{ margin:0; font:inherit; }
.bip-faq__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--bip-font-heading); font-weight:600; font-size:18px; color:var(--bip-ink); }
.bip-faq__chev{ color:var(--bip-blue); display:inline-flex; }
.bip-faq__panel{ padding:0 26px 24px; color:var(--bip-text); font-size:16px; line-height:1.65; }

/* ============ 9b. Maillage interne ============ */
.bip-l-more__head{ display:flex; flex-wrap:wrap; gap:14px; align-items:baseline; justify-content:space-between; margin-bottom:26px; }
.bip-l-more__title{ font-family:var(--bip-font-heading); font-weight:700; font-size:26px; color:var(--bip-ink); margin:0; }
.bip-l-more__sub{ font-size:15px; color:var(--bip-muted); }
.bip-l-more__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.bip-l-more__card{ background:#fff; border:1px solid var(--bip-border); border-radius:14px; padding:24px; display:block; transition:var(--bip-transition); }
/* Le README demande d'ajouter un survol discret : les cartes-liens sont inertes dans la maquette. */
.bip-l-more__card:hover{ border-color:var(--bip-blue); box-shadow:var(--bip-shadow-md); }
.bip-l-more__ct{ font-family:var(--bip-font-heading); font-weight:700; font-size:18px; color:var(--bip-ink); margin-bottom:6px; }
.bip-l-more__cx{ color:var(--bip-muted); font-size:15px; line-height:1.5; }

/* ============ 10. CTA final ============ */
.bip-l-cta__h2{ margin:0 0 16px; }
.bip-l-cta__text{ font-size:19px; line-height:1.6; color:rgba(255,255,255,.8); max-width:40em; margin:0 auto 34px; }
.bip-l-cta__row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; align-items:center; }
.bip-l-cta__phone{ color:#fff; border-color:rgba(255,255,255,.42); }
.bip-l-cta__note{ margin-top:18px; font-size:14px; color:rgba(255,255,255,.6); }

/* ============ Mini-markdown du copy ============ */
/* `**gras**` et `__souligné__` du handoff, rendus par bip_md(). */
.bip-md-strong{ color:var(--bip-ink); font-weight:700; }
.bip-md-underline{ text-decoration:underline; text-decoration-color:var(--bip-green); text-decoration-thickness:3px; text-underline-offset:5px; font-weight:700; }
.bip-on-dark .bip-md-strong{ color:#fff; }

/* ============ Responsive ============ */
/* Non maquetté : règles du README « Responsive », à valider avec le client. */
@media (max-width:1024px){
	.bip-l-hero__grid,
	.bip-l-why__grid{ grid-template-columns:1fr; gap:36px; }
	.bip-l-hero__visual{ height:340px; }
	.bip-l-grid4,
	.bip-l-steps{ grid-template-columns:repeat(2,1fr); }
	.bip-l-hero__h1{ font-size:44px; }
}

@media (max-width:768px){
	.bip-l-sec,
	.bip-l-sec--100{ padding:60px 0; }
	.bip-l-sec--76{ padding:48px 0; }
	.bip-l-hero{ padding:40px 0 16px; }
	.bip-l-grid2,
	.bip-l-grid3,
	.bip-l-grid3--tight,
	.bip-l-grid4,
	.bip-l-steps,
	.bip-l-eng,
	.bip-l-why__cards,
	.bip-l-more__grid{ grid-template-columns:1fr; }
	.bip-l-hero__h1{ font-size:36px; letter-spacing:-.3px; }
	.bip-l-hero__sub{ font-size:18px; }
	.bip-l-hero__visual{ height:240px; }
	.bip-l-head--center,
	.bip-l-head--sol,
	.bip-l-head--how{ margin-bottom:32px; }
	.bip-l-intro{ margin-bottom:28px; }
	/* Cibles tactiles de 44px minimum, comme demandé au README. */
	.bip-faq__btn{ padding:18px 20px; min-height:44px; font-size:17px; }
	.bip-faq__panel{ padding:0 20px 20px; }
	/* La barre CTA flottante masque le bas de page : on lui réserve la place. */
	body{ padding-bottom:96px; }
}