/* strasselec-landing.css — pages d'atterrissage CMS (1re : CMS 19 « Éclairage en pharmacie »).
   Chargée par themes/classic/templates/_partials/head.tpl.
   Pourquoi une feuille à part : l'affichage des pages CMS passe par un filtre qui SUPPRIME
   le style inline moderne (display:flex, gap, border-radius…). Les classes, elles, sont
   conservées : toute la mise en page passe donc par ici. Tout est préfixé .sl-lp. */

.sl-lp { --v:#0a7d2c; --v-f:#075a20; --v-cl:#e9f7ee; --b:#1a6fb0; --t:#1f2937; --g:#4b5563; --l:#e5e7eb;
  color:var(--t); font-size:17px; line-height:1.7; }
.sl-lp p, .sl-lp li { margin:0 0 14px; text-align:left !important; }
/* strasselec-content-colors.css force #000 !important sur tout .page-content : on rétablit nos couleurs */
body.page-cms .page-content .sl-lp .sl-hero p, body.page-cms .page-content .sl-lp .sl-hero h3,
body.page-cms .page-content .sl-lp .sl-hero strong, body.page-cms .page-content .sl-lp .sl-cta p,
body.page-cms .page-content .sl-lp .sl-code-ex, body.page-cms .page-content .sl-lp .sl-conseil p.sl-num,
body.page-cms .page-content .sl-lp p.sl-pro-pastille { color:#fff !important; }
/* éléments centrés (le text-align:left !important général ne doit pas les toucher) */
.sl-lp p.sl-carte-img, .sl-lp .sl-conseil p.sl-num, .sl-lp p.sl-pro-pastille, .sl-lp .sl-cta p { text-align:center !important; }
.sl-lp .sl-cta .sl-btns { justify-content:center; }
body.page-cms .page-content .sl-lp .sl-hero .sl-hero-txt, body.page-cms .page-content .sl-lp .sl-besoin p { color:#eafaf0 !important; }
body.page-cms .page-content .sl-lp .sl-cta .sl-cta-txt { color:#e3eefa !important; }
body.page-cms .page-content .sl-lp .sl-chiffre b, body.page-cms .page-content .sl-lp .sl-sur,
body.page-cms .page-content .sl-lp .sl-avantage::before { color:#0a7d2c !important; }
body.page-cms .page-content .sl-lp .sl-pro-titre { color:#075a20 !important; }
body.page-cms .page-content .sl-lp .sl-chiffre span, body.page-cms .page-content .sl-lp .sl-chapo,
body.page-cms .page-content .sl-lp .sl-carte-corps > p, body.page-cms .page-content .sl-lp .sl-conseil p,
body.page-cms .page-content .sl-lp .sl-code p, body.page-cms .page-content .sl-lp .sl-q p,
body.page-cms .page-content .sl-lp .sl-aide { color:#4b5563 !important; }
.sl-lp a { color:var(--b) !important; }
.sl-lp h2 { font-size:1.65em; line-height:1.25; margin:0 0 10px; color:var(--t); }
.sl-lp h3 { font-size:1.15em; line-height:1.3; margin:0 0 6px; color:var(--t); }
.sl-lp .sl-sect { margin:56px 0 0; }
.sl-lp .sl-chapo { color:var(--g); font-size:1.05em; max-width:760px; margin-bottom:22px; }
.sl-lp .sl-sur { display:inline-block; margin-bottom:8px; color:var(--v); font-weight:700; font-size:.8em;
  letter-spacing:.08em; text-transform:uppercase; }

/* --- bandeau d'ouverture --- */
.sl-lp .sl-hero { position:relative; overflow:hidden; border-radius:18px; padding:44px 44px 40px;
  background:linear-gradient(135deg,#0a7d2c 0%,#0f9a3a 55%,#16a34a 100%); color:#fff; }
.sl-lp .sl-hero::after { content:""; position:absolute; right:-40px; top:-40px; width:260px; height:260px;
  background:
    linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)) center/80px 260px no-repeat,
    linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)) center/260px 80px no-repeat; }
.sl-lp .sl-hero p { position:relative; z-index:1; }
.sl-lp .sl-hero .sl-hero-titre { font-size:1.95em; line-height:1.18; font-weight:800; margin:0 0 14px; max-width:680px; color:#fff; }
.sl-lp .sl-hero .sl-hero-txt { font-size:1.12em; line-height:1.6; max-width:640px; margin:0 0 26px; color:#eafaf0; }
.sl-lp .sl-btns { display:flex; flex-wrap:wrap; gap:12px; position:relative; z-index:1; margin:0; }
.sl-lp .sl-btn { display:inline-block; padding:13px 24px; border-radius:10px; font-weight:700; text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease; }
.sl-lp .sl-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.15); }
.sl-lp .sl-btn-blanc { background:#fff; color:var(--v-f) !important; }
.sl-lp .sl-btn-contour { border:2px solid rgba(255,255,255,.8); color:#fff !important; }
.sl-lp .sl-btn-vert { background:var(--v); color:#fff !important; }
.sl-lp .sl-btn-bleu { background:#fff; color:var(--b) !important; }

/* --- les deux besoins, dans le bandeau --- */
.sl-lp .sl-besoins { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:6px; }
.sl-lp .sl-besoin { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); border-radius:14px; padding:20px 22px; }
.sl-lp .sl-besoin h3 { font-size:1.2em; margin:0 0 6px; }
.sl-lp .sl-besoin p { font-size:.97em; line-height:1.55; margin:0 0 16px; }
.sl-lp .sl-besoin .sl-btns { margin:0; }
.sl-lp .sl-photo { margin:18px 0 0; }
.sl-lp .sl-photo img { display:block; width:100%; height:340px; object-fit:cover; border-radius:16px; }

/* --- chiffres --- */
.sl-lp .sl-chiffres { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0 0; }
.sl-lp .sl-chiffre { background:#fff; border:1px solid var(--l); border-radius:14px; padding:20px 14px; text-align:center;
  box-shadow:0 2px 10px rgba(16,24,40,.05); }
.sl-lp .sl-chiffre b { display:block; color:var(--v); font-size:1.75em; line-height:1.15; font-weight:800; }
.sl-lp .sl-chiffre span { display:block; color:var(--g); font-size:.9em; line-height:1.4; margin-top:4px; }

/* --- cartes familles --- */
.sl-lp .sl-cartes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sl-lp .sl-carte { display:flex; flex-direction:column; background:#fff; border:1px solid var(--l); border-radius:16px;
  overflow:hidden; box-shadow:0 2px 12px rgba(16,24,40,.06); transition:box-shadow .15s ease, transform .15s ease; }
.sl-lp .sl-carte:hover { box-shadow:0 10px 28px rgba(16,24,40,.12); transform:translateY(-2px); }
.sl-lp .sl-carte-large { grid-column:span 2; }
.sl-lp .sl-carte-img { background:#f6f8fa; text-align:center; padding:18px; margin:0; }
.sl-lp .sl-carte-img img { width:150px; height:150px; object-fit:contain; mix-blend-mode:multiply; }
.sl-lp .sl-carte-corps { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.sl-lp .sl-carte-corps > p { color:var(--g); font-size:.95em; line-height:1.55; }
.sl-lp .sl-puces { margin:auto 0 0; padding-top:6px; line-height:2.3; }
.sl-lp .sl-puce { display:inline-block; margin:0 4px 4px 0; padding:3px 12px; border-radius:999px; background:var(--v-cl);
  color:var(--v-f) !important; font-size:.85em; font-weight:600; line-height:1.9; text-decoration:none !important; }
.sl-lp .sl-puce:hover { background:var(--v); color:#fff !important; }
.sl-lp .sl-puce-tout { background:#fff; border:1px solid var(--v); }

/* --- compte pro --- */
.sl-lp .sl-pro { display:flex; align-items:center; gap:24px; margin:56px 0 0; padding:26px 30px; border-radius:16px;
  background:var(--v-cl); border:1px solid #bfe3cb; }
.sl-lp .sl-pro-pastille { flex:0 0 96px; width:96px; height:96px; border-radius:50%; background:var(--v); color:#fff;
  font-weight:800; font-size:1.55em; line-height:96px; text-align:center; margin:0; }
.sl-lp .sl-pro-txt { flex:1; }
.sl-lp .sl-pro-txt .sl-pro-titre { font-size:1.3em; font-weight:700; color:var(--v-f); margin:0 0 4px; }

/* --- conseils --- */
.sl-lp .sl-conseils { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.sl-lp .sl-conseil { position:relative; padding:22px 22px 18px 76px; border-radius:14px; background:#f7f9fc; border:1px solid #edf1f6; }
.sl-lp .sl-num { position:absolute; left:22px; top:22px; width:38px; height:38px; border-radius:50%; background:var(--v);
  color:#fff; font-weight:800; line-height:38px; text-align:center; margin:0; }
.sl-lp .sl-conseil p { color:var(--g); font-size:.97em; line-height:1.6; margin:0; }

/* --- lecture de la référence --- */
.sl-lp .sl-decode { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sl-lp .sl-code { border-radius:14px; border:1px solid var(--l); padding:20px; background:#fff; }
.sl-lp .sl-code .sl-code-ex { display:inline-block; font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; font-size:1.05em;
  background:#111827; color:#fff; border-radius:8px; padding:4px 12px; margin:0 0 12px; }
.sl-lp .sl-code p { color:var(--g); font-size:.95em; line-height:1.6; margin:0; }
.sl-lp .sl-aide { margin-top:16px; color:var(--g); }

/* --- avantages --- */
.sl-lp .sl-avantages { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 26px; }
.sl-lp .sl-avantage { position:relative; padding-left:38px; font-size:.97em; line-height:1.55; margin:0; }
.sl-lp .sl-avantage::before { content:"✓"; position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
  background:var(--v-cl); color:var(--v); font-weight:800; line-height:26px; text-align:center; }

/* --- appel à l'action --- */
.sl-lp .sl-cta { margin:56px 0 0; padding:38px 30px; border-radius:18px; text-align:center;
  background:linear-gradient(135deg,#1a6fb0,#1d4f91); color:#fff; }
.sl-lp .sl-cta .sl-cta-titre { font-size:1.6em; font-weight:800; margin:0 0 8px; color:#fff; }
.sl-lp .sl-cta .sl-cta-txt { color:#e3eefa; max-width:620px; margin:0 auto 22px; }
.sl-lp .sl-cta .sl-btns { justify-content:center; }

/* --- FAQ --- */
.sl-lp .sl-faq { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.sl-lp .sl-q { padding:20px 22px; border-radius:14px; border:1px solid var(--l); background:#fff; }
.sl-lp .sl-q p { color:var(--g); font-size:.96em; line-height:1.6; margin:0; }

/* --- bandeau projet (strasprojet) repoussé en fin de page --- */
.sl-lp .sp-sector { margin:40px 0 8px; }

@media (max-width: 991px) {
  .sl-lp .sl-cartes, .sl-lp .sl-decode, .sl-lp .sl-avantages { grid-template-columns:repeat(2,1fr); }
  .sl-lp .sl-chiffres { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
  .sl-lp { font-size:16px; }
  .sl-lp .sl-hero { padding:30px 22px 28px; border-radius:14px; }
  .sl-lp .sl-hero::after { display:none; }
  .sl-lp .sl-hero .sl-hero-titre { font-size:1.55em; }
  .sl-lp .sl-cartes, .sl-lp .sl-decode, .sl-lp .sl-avantages, .sl-lp .sl-conseils, .sl-lp .sl-faq, .sl-lp .sl-besoins { grid-template-columns:1fr; }
  .sl-lp .sl-carte-large { grid-column:auto; }
  .sl-lp .sl-photo img { height:200px; }
  .sl-lp .sl-pro { flex-direction:column; text-align:center; padding:24px 20px; }
  .sl-lp .sl-sect, .sl-lp .sl-pro, .sl-lp .sl-cta { margin-top:40px; }
  .sl-lp h2 { font-size:1.4em; }
  .sl-lp .sl-btn { display:block; text-align:center; }
}

/* --- encadré de renvoi vers une landing page (ex. « Vous êtes pharmacien ? » sur CMS 16) --- */
.sl-lp.sl-lp-bloc { font-size:16px; }
.sl-lp .sl-renvoi { display:flex; align-items:center; gap:22px; margin:26px 0 30px; padding:22px 26px; border-radius:14px;
  background:#e9f7ee; border:1px solid #bfe3cb; }
.sl-lp .sl-renvoi-croix { flex:0 0 58px; width:58px; height:58px; margin:0; position:relative; font-size:0; line-height:0; border-radius:14px; background:#0a7d2c; }
.sl-lp .sl-renvoi-croix::before, .sl-lp .sl-renvoi-croix::after { content:""; position:absolute; left:50%; top:50%; background:#fff; border-radius:2px; }
.sl-lp .sl-renvoi-croix::before { width:30px; height:10px; margin:-5px 0 0 -15px; }
.sl-lp .sl-renvoi-croix::after { width:10px; height:30px; margin:-15px 0 0 -5px; }
.sl-lp .sl-renvoi-txt { flex:1; }
body.page-cms .page-content .sl-lp .sl-renvoi-titre { font-size:1.25em; font-weight:700; color:#075a20 !important; margin:0 0 4px; }
body.page-cms .page-content .sl-lp .sl-renvoi-txt p { color:#234a2e !important; margin:0; }
.sl-lp .sl-renvoi .sl-btn { flex:0 0 auto; white-space:nowrap; }
@media (max-width: 767px) {
  .sl-lp .sl-renvoi { flex-direction:column; align-items:flex-start; padding:20px; }
  .sl-lp .sl-renvoi .sl-btn { white-space:normal; }
}