/* LinkAfr sur le modèle social-media-management : l'orange de la marque à la
   place du violet, et quelques pièces à nous. Les classes du modèle vivent dans
   @layer utilities : une surcharge de classe du modèle va dans cette couche
   (sinon elle écrase ses variantes :hover). */
:root {
  --color-primary-50: #fff7ed;
  --color-primary-100: #ffedd5;
  --color-primary-200: #fed7aa;
  --color-primary-300: #fdba74;
  --color-primary-400: #fb923c;
  --color-primary-500: #ea580c;
  --color-primary-600: #c2410c;
  --color-primary-700: #9a3412;
}
@layer utilities {
  .badge, .btn { text-transform: none; }
}
/* Titre du héros : le reflet animé du modèle, en encre et orange. */
.hero-text-color-2 { background-image: linear-gradient(45deg, #101012, #ea580c, #101012); }

.lk-marque { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: #101012; }
.lk-marque img { width: 36px; height: 36px; }

.lk-fond-reseaux { background: #0b0b0c url(/accueil/images/linkafr/fond-reseaux.webp) center bottom / cover no-repeat; }

.lk-tarif { box-shadow: 0 1px 2px rgba(16,16,18,.04), 0 24px 48px -24px rgba(16,16,18,.22); }
.lk-prix { font-size: 20px; color: #101012; }
.lk-prix span { display: block; font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: #ea580c; }

.lk-menu-lien:hover { color: #ea580c; }

/* Classes utilisées par nos sections neuves et absentes du CSS compilé du modèle. */
.max-w-\[560px\] { max-width: 560px; }
.max-w-\[760px\] { max-width: 760px; }
.mb-\[56px\] { margin-bottom: 56px; }
.pl-2 { padding-left: 8px; }
.pt-4 { padding-top: 16px; }
@media (min-width: 40rem) { .sm\:p-10 { padding: 40px; } }
@media (min-width: 48rem) { .md\:flex-1 { flex: 1 1 0%; } .md\:w-\[42\%\] { width: 42%; } }

/* Section paiement : une seule illustration composée (voir maquettes/compo-paiement.html). */
.lk-compo { width: min(600px, 88vw); margin: 0 auto; }
.lk-compo img { width: 100%; height: auto; }

/* Galerie des modèles (bande défilante). */
.lk-vignette { flex: none; width: 200px; margin: 0; }
.lk-vignette img { width: 100%; height: auto; aspect-ratio: 360 / 672; object-fit: cover; border-radius: 22px; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 18px 36px -18px rgba(16,16,18,.35); }
.lk-vignette figcaption { margin-top: 12px; text-align: center; font-size: 15px; font-weight: 500; color: #101012; }
@media (max-width: 39.99rem) { .lk-vignette { width: 150px; } }

/* Logos de l'écosystème. */
.lk-outil { width: 64px; height: 64px; border-radius: 16px; background: #f5f5f7; display: grid; place-items: center; padding: 12px; }
.lk-outil img { max-width: 100%; max-height: 100%; }

/* Pays. */
.lk-pays { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #f5f5f7; font-size: 15px; color: #101012; }
.lk-pays img { width: 28px; height: 21px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(16,16,18,.08); }

/* Classes d'app-builder (étapes, cartes empilées) absentes du CSS compilé de
   social-media-management. Points de rupture de Tailwind 4 : sm 40rem,
   md 48rem, lg 64rem, xl 80rem. Les paliers larges après les étroits. */
.mt-12 { margin-top: 48px; }
.max-w-\[520px\] { max-width: 520px; }
.max-w-\[900px\] { max-width: 900px; }
.max-w-\[90\%\] { max-width: 90%; }
.w-\[0\%\] { width: 0%; }
.w-\[25\%\] { width: 25%; }
.border-stroke-1\/90 { border-color: color-mix(in oklab, var(--color-stroke-1) 90%, transparent); }
@media (max-width: 39.99rem) { .max-sm\:min-h-\[255px\] { min-height: 255px; } }
@media (min-width: 48rem) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:max-w-\[65\%\] { max-width: 65%; }
}
@media (min-width: 64rem) {
  .lg\:flex-1 { flex: 1 1 0%; }
  .lg\:max-w-\[620px\] { max-width: 620px; }
  .lg\:top-28 { top: 112px; }
  .lg\:max-w-full { max-width: 100%; }
}
@media (min-width: 80rem) {
  .xl\:pt-\[150px\] { padding-top: 150px; }
  .xl\:pb-\[150px\] { padding-bottom: 150px; }
}

/* Section paiements en grille bento (sections_plus.paiements). */
.lk-bento { height: 100%; display: flex; flex-direction: column; gap: 24px; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid rgba(16,16,18,.06); }
.lk-bento p { color: rgba(16,16,18,.6); }
.lk-bento-sombre { background: #101012; border-color: #101012; }
.lk-bento-sombre h3 { color: #fff; }
.lk-bento-sombre p { color: rgba(255,255,255,.62); }
.lk-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto; }
@media (min-width: 40rem) { .lk-ops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lk-op { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f5f5f7; font-size: 15px; font-weight: 500; color: #101012; }
.lk-op img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex: none; }
.lk-visa { width: 40px; height: 40px; border-radius: 10px; background: #101012; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.lk-notif { margin-top: auto; border-radius: 16px; background: #fff; padding: 16px; box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 16px 32px -18px rgba(16,16,18,.35); display: flex; flex-direction: column; gap: 10px; }
.lk-notif-haut { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; }
.lk-notif-haut b { color: #101012; font-weight: 600; }
.lk-notif-haut span { margin-left: auto; }
.lk-notif p { color: #101012 !important; font-size: 15px; line-height: 1.4; }
.lk-ok { width: fit-content; border-radius: 999px; background: #ecfdf3; color: #15803d; font-size: 13px; font-weight: 600; padding: 5px 12px; }
.lk-mini-etapes { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.lk-mini-etapes li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f5f5f7; font-size: 15px; color: #101012; }
.lk-mini-etapes span { width: 28px; height: 28px; border-radius: 999px; background: #ea580c; color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; flex: none; }
.lk-solde-ligne { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lk-solde-l { display: block; font-size: 14px; color: #a1a1aa; }
.lk-solde-v { display: block; font-size: 44px; font-weight: 600; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.lk-solde-v small { font-size: 18px; color: #a1a1aa; font-weight: 500; }
.lk-solde-b { border-radius: 999px; background: #ea580c; color: #fff; font-weight: 600; padding: 12px 22px; }

/* Héros vivant : fin du titre qui défile (linkafr.js), visages, pastilles flottantes. */
.lk-rotatif { display: inline-grid; justify-items: center; }
.lk-rotatif > span { grid-area: 1 / 1; opacity: 0; transform: translateY(55%); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.lk-rotatif > span.lk-on { opacity: 1; transform: none; }
.lk-rotatif > span.lk-off { opacity: 0; transform: translateY(-55%); }
.lk-badge-visages { display: inline-flex !important; align-items: center; gap: 10px; padding-left: 6px !important; }
.lk-visages { display: inline-flex; }
.lk-visages img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.lk-visages img + img { margin-left: -9px; }
/* Bulles de logos autour du titre (façon nyole.com), parallaxe par main.js. */
.lk-bulles { position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: -1; pointer-events: none; }
.lk-bulle { position: absolute; margin: 0; width: 50px; height: 50px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 14px 30px -14px rgba(16,16,18,.35); }
.lk-bulle img { width: 44px; height: 44px; border-radius: 999px; object-fit: contain; background: #fff; }
.lk-plat-br, .lk-plat-br img { border-bottom-right-radius: 0; }
.lk-plat-bl, .lk-plat-bl img { border-bottom-left-radius: 0; }
.lk-bulle-large { display: none; }
@media (max-width: 26.6rem) { .lk-bulle { width: 40px; height: 40px; } .lk-bulle img { width: 34px; height: 34px; } }
/* Téléphone : quatre bulles au bord, hors du badge et du bouton. */
.lk-bulle-1 { left: 5%; top: -9%; }
.lk-bulle-2 { right: 7%; top: -7%; }
.lk-bulle-5 { left: 3%; top: 63%; }
.lk-bulle-6 { right: 3%; top: 65%; }
@media (min-width: 48rem) {
  .lk-bulle-large { display: block; }
  .lk-bulle-1 { left: 11%; top: -2%; }
  .lk-bulle-2 { right: 12%; top: -3%; }
  .lk-bulle-3 { left: 3%; top: 26%; }
  .lk-bulle-4 { right: 3%; top: 24%; }
  .lk-bulle-5 { left: 12%; top: 66%; }
  .lk-bulle-6 { right: 13%; top: 68%; }
  .lk-bulle-7 { left: 5%; top: 50%; }
  .lk-bulle-8 { right: 5%; top: 48%; }
}
@media (min-width: 80rem) {
  .lk-bulle-1 { left: 15%; top: -3%; }
  .lk-bulle-2 { right: 16%; top: -4%; }
  .lk-bulle-3 { left: 6%; top: 24%; }
  .lk-bulle-4 { right: 7%; top: 22%; }
  .lk-bulle-5 { left: 17%; top: 70%; }
  .lk-bulle-6 { right: 18%; top: 72%; }
  .lk-bulle-7 { left: 3%; top: 50%; }
  .lk-bulle-8 { right: 3%; top: 48%; }
}
@media (prefers-reduced-motion: reduce) { .lk-rotatif > span { transition: none; } }

/* Visa et Mastercard. */
.lk-cartes { display: inline-flex; gap: 4px; flex: none; }
.lk-cartes img { width: 30px; height: 30px; padding: 3px; border-radius: 8px; background: #fff; object-fit: contain; }

/* Vidéo de présentation (motion design), sous « Comment ça marche » */
.lk-video-section{padding:64px 0 72px;background:#fff}
@media(min-width:1024px){.lk-video-section{padding:96px 0 112px}}
.lk-video{position:relative;max-width:1240px;margin:0 auto;border-radius:20px;overflow:hidden;background:#f9fafb;aspect-ratio:16/9;box-shadow:0 30px 80px rgba(16,16,18,.12),0 0 0 1px rgba(16,16,18,.06)}
@media(min-width:1024px){.lk-video{border-radius:28px}}
.lk-video-lecteur{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.lk-video-son{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:999px;background:rgba(16,16,18,.8);color:#fff;font:500 12.5px/1 var(--font-inter-tight),"Inter Tight",sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lk-video-son:hover{background:rgba(16,16,18,.92)}
.lk-video-son:focus-visible{outline:2px solid #ea580c;outline-offset:2px}
.lk-video-son svg{width:16px!important;height:16px!important;flex-shrink:0}
@media(min-width:640px){.lk-video-son{right:14px;bottom:14px;gap:8px;height:40px;padding:0 16px;font-size:14px}}
@media(min-width:1024px){.lk-video-son{right:22px;bottom:22px;height:44px;padding:0 18px;font-size:15px}}

/* ── Pages du site (pages_linkafr.py) ── */
.lk-entete-page { padding-top: 150px; padding-bottom: 50px; }
@media (min-width: 64rem) { .lk-entete-page { padding-top: 200px; padding-bottom: 80px; } }
.max-w-\[640px\] { max-width: 640px; }
@media (min-width: 48rem) { .md\:col-span-3 { grid-column: span 3 / span 3; } }
.lk-carte-f { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid rgba(16,16,18,.06); }
.lk-carte-f p { color: rgba(16,16,18,.62); }
.lk-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
@media (min-width: 40rem) { .lk-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .lk-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lk-galerie .lk-vignette { width: auto; }
.lk-texte p { color: rgba(16,16,18,.7); font-size: 18px; line-height: 1.6; }
.lk-lien { color: #c2410c; text-decoration: underline; text-underline-offset: 3px; }
.lk-form label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; color: #101012; }
.lk-form input, .lk-form textarea { width: 100%; border: 1px solid rgba(16,16,18,.14); border-radius: 12px; padding: 12px 14px; font: inherit; font-weight: 400; background: #fff; }
.lk-form input:focus, .lk-form textarea:focus { outline: none; border-color: #ea580c; box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
/* Page ouverte dans le menu. */
header a[aria-current="page"] { color: #101012; border-color: rgba(16,16,18,.12); }
.lk-menu-lien[aria-current="page"] { color: #ea580c; }