/* ══ L'APPEL FINAL DE L'ACCUEIL — refait le 17/09 d'après la maquette
   « Boostez votre activité / Prêt à attirer plus de clients ? ».
   Une carte bleutée : tuile-icône, surtitre + titre + phrase, filet
   vertical, trois coches, bouton pilule, note manuscrite fléchée et trois
   traits d'élan. Feuille à part (vitrine.css est partagée) ; mêmes
   couleurs que le bloc tarifs : bleu #0a6cf5, encre #0b1545, gris #46536f.
   ⚠ La police manuscrite (Caveat) est importée par tarifs-accueil.css et
   sector-showcase.css, chargées sur la même page. */
body.mode-site .lf{padding:34px 0 60px;background:#fff}
body.mode-site .lf .wrap.lf-wrap{max-width:1320px;width:calc(100% - 70px);margin:0 auto}
.lf-carte{position:relative;isolation:isolate;overflow:hidden;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:0 28px;
  padding:54px 58px 46px 36px;border-radius:22px;border:1px solid #dce7f6;
  background:linear-gradient(100deg,#edf4ff 0%,#f3f8ff 48%,#e8f1ff 100%);
  box-shadow:0 14px 34px #1c487f10}
/* Les deux grandes courbes claires du fond. */
.lf-carte::before,.lf-carte::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.lf-carte::before{left:-8%;right:30%;top:58%;height:220%;background:#ffffff8c;
  box-shadow:0 0 0 1px #d6e4f8}
.lf-carte::after{right:-12%;width:46%;top:-70%;height:120%;background:#ffffff66}

/* ── La tuile-icône ──────────────────────────────────────────────────── */
.lf-ico{display:grid;place-items:center;width:84px;height:84px;border-radius:20px;
  background:#fbfdff;border:1px solid #e1eaf7;box-shadow:0 8px 22px #1c487f0d}
.lf-ico svg{width:42px;height:42px}

/* ── Le texte ────────────────────────────────────────────────────────── */
.lf-sur{display:block;margin:0 0 6px;font:600 12.5px/1.2 Inter,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:#0a6cf5}
body.mode-site .lf h2{margin:0 0 10px;font:800 clamp(22px,1.95vw,28px)/1.15 Inter,sans-serif;
  letter-spacing:-.02em;color:#0b1545}
body.mode-site .lf .lf-phrase{margin:0;max-width:34em;font:400 clamp(14px,1.05vw,15.5px)/1.5 Inter,sans-serif;color:#46536f}

/* ── Les coches, derrière un filet vertical ─────────────────────────── */
.lf-coches{list-style:none;margin:0;padding:6px 0 6px 30px;border-left:1px solid #d3dfef;
  display:grid;gap:12px;align-self:center}
.lf-coches li{display:flex;align-items:center;gap:13px;white-space:nowrap;
  font:500 clamp(14px,1.05vw,15.5px)/1.2 Inter,sans-serif;color:#1c2a4d}
.lf-coches svg{flex:0 0 auto;width:23px;height:23px;color:#0a6cf5}

/* ── Le bouton, la note et les traits d'élan ─────────────────────────── */
.lf-cta{position:relative;padding-left:14px}
body.mode-site .lf a.lf-bouton{display:inline-flex;align-items:center;gap:16px;padding:16px 28px;
  border-radius:40px;background:linear-gradient(180deg,#1677ff,#0a62e6);color:#fff;
  font:600 clamp(15px,1.15vw,16.5px)/1.2 Inter,sans-serif;text-decoration:none;white-space:nowrap;
  box-shadow:0 14px 28px #0a6cf545,0 2px 0 #ffffff33 inset;transition:transform .15s,box-shadow .15s}
body.mode-site .lf a.lf-bouton:hover{color:#fff;transform:translateY(-1px);box-shadow:0 18px 34px #0a6cf555}
.lf-bouton svg{width:20px;height:20px}
.lf-elan{position:absolute;right:-30px;top:-28px;width:38px;height:42px;color:#0a6cf5}
.lf-note{position:absolute;right:10px;bottom:calc(100% + 30px);margin:0;width:max-content;
  font:600 clamp(17px,1.45vw,21px)/1.12 'Caveat','Segoe Print','Bradley Hand',cursive;color:#0b1545;
  transform:rotate(-9deg);transform-origin:right bottom}
.lf-note span{display:block;padding-left:22px}
/* La flèche vit dans .lf-cta (pas dans la note, qui est tournée) : sa
   pointe s'arrête juste au-dessus du bouton. */
.lf-fleche{position:absolute;left:calc(30% + 26px);bottom:calc(100% + 5px);width:46px;height:42px;color:#0b1545}

/* ── Écrans moyens : deux rangées ────────────────────────────────────── */
@media (max-width:1180px){
  /* Rangée 1 : tuile + texte. Rangée 2 : coches en ligne, puis le bouton
     avec la note AU-DESSUS, dans le flux (en absolu, elle recouvrait le
     texte — mesuré à 1024 px). */
  .lf-carte{grid-template-columns:auto minmax(0,1fr) auto;gap:24px 30px;padding:36px 44px 34px 34px}
  .lf-texte{grid-column:2 / 4}
  .lf-coches{grid-column:1 / 3;grid-row:2;border-left:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
  .lf-cta{grid-column:3;grid-row:2;padding-left:0;display:grid;justify-items:end;gap:16px}
  .lf-note{position:static;transform:rotate(-4deg);transform-origin:center;text-align:right}
  .lf-fleche{display:none}
}
@media (max-width:760px){
  body.mode-site .lf .wrap.lf-wrap{width:calc(100% - 32px)}
  .lf-carte{grid-template-columns:1fr;padding:28px 22px 26px;gap:18px}
  .lf-ico{width:64px;height:64px;border-radius:16px}
  .lf-ico svg{width:34px;height:34px}
  .lf-texte,.lf-coches,.lf-cta{grid-column:1;grid-row:auto;justify-self:stretch}
  .lf-coches{display:grid}
  .lf-cta{justify-items:stretch}
  .lf-coches li{white-space:normal}
  body.mode-site .lf a.lf-bouton{display:flex;justify-content:center;white-space:normal;text-align:center;padding:16px 22px}
  .lf-note{position:static;transform:rotate(-3deg);margin:10px 0 4px;text-align:center;width:auto}
  .lf-note span{display:inline;padding:0}
  .lf-fleche,.lf-elan{display:none}
}
@media (prefers-reduced-motion:reduce){body.mode-site .lf a.lf-bouton{transition:none}}