/*
 * Likta — pages vitrine (identite « papier », 18/09/2026)
 * Charge UNIQUEMENT sur les pages listees dans $isVitrine (components/header.php).
 * Les pages de l'application gardent custom.css seul.
 * Discussion : DOCS/discussions/design/2026-09-18_Refonte_Site_Vitrine_Likta.md
 */

:root {
    --lk-violet: #5A3FD9;      /* milieu du degrade du logo (#4149D2 -> #8A3FE4) */
    --lk-violet-fonce: #4A31C2;
    --lk-nuit: #231A55;        /* titres, blocs sombres */
    --lk-pale: #ECE8FB;
    --lk-encre: #1D1A24;
    --lk-gris: #5E5A68;        /* 6,6:1 sur papier */
    --lk-papier: #F7F5F0;
    --lk-page: #FFFFFF;
    --lk-filet: #E4DFD3;
    --lk-rec: #E0433A;         /* point d'enregistrement, et rien d'autre */
    --lk-titre: 'Fredoka', 'Rubik', system-ui, sans-serif;
    --lk-texte: 'Rubik', system-ui, sans-serif;
    --lk-doc: 'Frank Ruhl Libre', Georgia, serif;
    --lk-ease: cubic-bezier(.22, 1, .36, 1);
    --lk-ombre-feuille: 0 30px 50px -28px rgba(35, 26, 85, .45), 0 1px 2px rgba(35, 26, 85, .06);
}

body.lk-v {
    background: var(--lk-papier);
    color: var(--lk-encre);
    font-family: var(--lk-texte);
    font-size: 16px;
    line-height: 1.6;
}
body.lk-v ::selection { background: var(--lk-violet); color: #fff; }
body.lk-v :focus-visible { outline: 2.5px solid var(--lk-violet); outline-offset: 3px; border-radius: 6px; }
body.lk-v a { text-underline-offset: .2em; }
body.lk-v h1, body.lk-v h2, body.lk-v h3 { font-family: var(--lk-titre); color: var(--lk-nuit); text-wrap: balance; }

.lk-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.lk-wrap-etroit { width: min(880px, 100% - 32px); margin-inline: auto; }
.lk-section { padding-block: clamp(72px, 9vw, 120px); }
.lk-h2 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.lk-intro { margin-top: 14px; font-size: 18px; color: var(--lk-gris); max-width: 56ch; }
.lk-centre { text-align: center; }
.lk-centre .lk-intro { margin-inline: auto; }

/* ---------- boutons ---------- */
.lk-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font: 600 16px/1 var(--lk-texte);
    background: var(--lk-violet); color: #fff;
    border-radius: 12px; padding: 16px 22px;
    box-shadow: 0 10px 20px -12px rgba(90, 63, 217, .9);
    transition: background-color .2s var(--lk-ease), transform .2s var(--lk-ease), box-shadow .2s var(--lk-ease);
    text-decoration: none;
}
.lk-btn:hover { background: var(--lk-violet-fonce); transform: translateY(-1px); box-shadow: 0 14px 24px -12px rgba(90, 63, 217, .9); }
.lk-btn:active { transform: translateY(0); }
.lk-btn svg { transition: transform .2s var(--lk-ease); }
.lk-btn:hover svg { transform: translateX(3px); }
[dir="rtl"] .lk-btn svg { transform: scaleX(-1); }
[dir="rtl"] .lk-btn:hover svg { transform: scaleX(-1) translateX(3px); }
.lk-btn-clair { background: #fff; color: var(--lk-nuit); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); }
.lk-btn-clair:hover { background: var(--lk-pale); }

/* ---------- navigation ---------- */
.lk-nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; background: rgba(247, 245, 240, .92); border-bottom: 1px solid var(--lk-filet); }
@supports (backdrop-filter: blur(8px)) { .lk-nav { background: rgba(247, 245, 240, .82); backdrop-filter: saturate(1.4) blur(10px); } }
.lk-nav-in { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lk-nav-logo img { height: 28px; display: block; }
.lk-nav-liens { display: none; gap: 26px; }
.lk-nav-liens a { font-size: 15px; color: var(--lk-encre); text-decoration: none; padding-block: 6px; background: linear-gradient(var(--lk-violet), var(--lk-violet)) no-repeat 0 100% / 0 2px; transition: background-size .25s var(--lk-ease), color .2s; }
.lk-nav-liens a:hover { color: var(--lk-violet); background-size: 100% 2px; }
@media (min-width: 900px) { .lk-nav-liens { display: flex; } }
.lk-nav-droite { display: flex; align-items: center; gap: 12px; }
.lk-langs { display: flex; gap: 2px; font-size: 13px; font-weight: 500; }
.lk-langs a { padding: 5px 8px; border-radius: 7px; color: var(--lk-gris); text-decoration: none; transition: background-color .2s, color .2s; }
.lk-langs a:hover { color: var(--lk-nuit); background: rgba(35, 26, 85, .06); }
.lk-langs a[aria-current="true"] { background: var(--lk-pale); color: var(--lk-nuit); }
.lk-compte { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--lk-violet); border: 1.5px solid var(--lk-violet); border-radius: 999px; padding: 7px 16px; text-decoration: none; transition: background-color .2s, color .2s; }
.lk-compte:hover { background: var(--lk-violet); color: #fff; }
.lk-compte svg { display: none; }
@media (max-width: 520px) {
    .lk-compte { padding: 8px; }
    .lk-compte span { display: none; }
    .lk-compte svg { display: block; }
    .lk-nav-logo img { height: 24px; }
}
.lk-nav-espace { height: 64px; }

/* ---------- hero ---------- */
.lk-hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.lk-hero-grille { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .lk-hero-grille { grid-template-columns: 1fr 1.05fr; } }
.lk-hero h1 { font-size: clamp(48px, 7vw, 84px); font-weight: 600; line-height: .98; letter-spacing: -.025em; }
.lk-hero h1 em { font-style: normal; color: var(--lk-violet); }
.lk-hero-sous { margin-top: 20px; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--lk-gris); white-space: pre-line; max-width: 34ch; }

.lk-appel { margin-top: 32px; display: inline-flex; flex-direction: column; gap: 10px; }
.lk-appel-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--lk-gris); }
.lk-numero { display: flex; align-items: center; gap: 14px; background: var(--lk-page); border: 1px solid var(--lk-filet); border-radius: 16px; padding: 14px 16px 14px 20px; box-shadow: 0 2px 0 rgba(35, 26, 85, .06); }
.lk-numero a { font: 600 clamp(26px, 3vw, 32px)/1 var(--lk-texte); color: var(--lk-nuit); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lk-numero a:hover { color: var(--lk-violet); }
.lk-point { width: 10px; height: 10px; border-radius: 50%; background: var(--lk-rec); box-shadow: 0 0 0 4px rgba(224, 67, 58, .15); flex: none; }
.lk-pays { display: flex; gap: 4px; margin-inline-start: 4px; }
.lk-pays button { font: 600 12px/1 var(--lk-texte); padding: 6px 8px; border-radius: 7px; color: var(--lk-gris); border: 1px solid var(--lk-filet); background: transparent; cursor: pointer; transition: all .2s; }
.lk-pays button:hover { color: var(--lk-nuit); border-color: var(--lk-nuit); }
.lk-pays button[aria-pressed="true"] { color: #fff; background: var(--lk-nuit); border-color: var(--lk-nuit); }

.lk-cta-ligne { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.lk-cta-note { font-size: 14px; color: var(--lk-gris); }

/* scene : l'appel devient une page */
.lk-scene { position: relative; min-height: 470px; }
.lk-appel-ecran { position: absolute; inset-inline-start: 0; inset-block-start: 76px; width: min(250px, 46%); z-index: 2; background: var(--lk-nuit); color: #D9D3F5; border-radius: 20px; padding: 18px 18px 22px; font-size: 14px; line-height: 1.55; box-shadow: 0 24px 44px -24px rgba(35, 26, 85, .8); }
.lk-appel-haut { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #B8AFE8; margin-bottom: 14px; }
.lk-appel-haut b { color: #fff; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.lk-appel-haut .lk-point { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(224, 67, 58, .25); }
.lk-bruit { opacity: .5; }
.lk-feuille { position: absolute; inset-inline-end: 0; inset-block-start: 0; width: min(330px, 62%); background: var(--lk-page); border: 1px solid var(--lk-filet); border-radius: 4px; padding: 30px 30px 34px; box-shadow: var(--lk-ombre-feuille); transform: rotate(1.2deg); }
[dir="rtl"] .lk-feuille { transform: rotate(-1.2deg); }
.lk-feuille-t { font: 700 26px/1.15 var(--lk-doc); color: var(--lk-nuit); }
.lk-feuille-s { font-size: 13px; color: var(--lk-gris); margin-top: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--lk-filet); }
.lk-feuille .lk-feuille-h { font: 500 17px/1.3 var(--lk-doc); color: var(--lk-violet); margin: 16px 0 4px; }
.lk-feuille p { font: 400 15px/1.55 var(--lk-doc); color: var(--lk-encre); }
.lk-fleche { position: absolute; inset-inline-start: calc(min(250px, 46%) - 70px); inset-block-start: 40px; color: var(--lk-violet); z-index: 3; }
[dir="rtl"] .lk-fleche { transform: scaleX(-1); }
@media (max-width: 640px) {
    .lk-scene { min-height: 0; display: flex; flex-direction: column; }
    .lk-appel-ecran, .lk-feuille { position: relative; inset: auto; width: auto; }
    .lk-feuille { margin: -14px 10px 0; transform: rotate(.8deg); }
    .lk-fleche { display: none; }
}

/* motif : les trois traits du « i » du logo */
.lk-traits { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.lk-traits i { display: block; width: 4px; border-radius: 3px; background: currentColor; height: 55%; }
.lk-traits i:nth-child(2) { height: 100%; }
.lk-appel-ecran .lk-traits { color: #B8AFE8; margin-bottom: 12px; }
.lk-appel-ecran .lk-traits i { animation: lk-voix 1.6s var(--lk-ease) infinite; transform-origin: bottom; }
.lk-appel-ecran .lk-traits i:nth-child(2) { animation-delay: .2s; }
.lk-appel-ecran .lk-traits i:nth-child(3) { animation-delay: .4s; }
@keyframes lk-voix { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .lk-appel-ecran .lk-traits i { animation: none; } }

.lk-preuves { margin-top: clamp(48px, 6vw, 72px); padding-top: 22px; border-top: 1px solid var(--lk-filet); display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 14px; color: var(--lk-gris); }
.lk-preuves span { display: inline-flex; align-items: center; gap: 8px; }
.lk-preuves svg { color: var(--lk-violet); flex: none; }

/* ---------- pour qui ---------- */
.lk-pourqui { background: var(--lk-page); border-block: 1px solid var(--lk-filet); }
.lk-onglets { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.lk-onglet { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1 var(--lk-texte); color: var(--lk-encre); padding: 12px 18px; border-radius: 999px; border: 1px solid var(--lk-filet); background: var(--lk-papier); cursor: pointer; transition: all .2s var(--lk-ease); }
.lk-onglet svg { color: var(--lk-violet); }
.lk-onglet:hover { border-color: var(--lk-violet); }
.lk-onglet[aria-selected="true"] { background: var(--lk-nuit); border-color: var(--lk-nuit); color: #fff; }
.lk-onglet[aria-selected="true"] svg { color: #C9BEFF; }
.lk-panneau { margin-top: 28px; display: grid; gap: 10px; max-width: 760px; min-height: 120px; }
.lk-panneau-tag { font: 500 clamp(26px, 3vw, 34px)/1.15 var(--lk-doc); color: var(--lk-nuit); }
.lk-panneau p:not(.lk-panneau-tag) { font-size: 18px; color: var(--lk-gris); max-width: 60ch; }

/* ---------- etapes ---------- */
.lk-etapes { margin-top: 56px; display: grid; gap: 40px; counter-reset: etape; position: relative; }
@media (min-width: 860px) {
    .lk-etapes { grid-template-columns: repeat(3, 1fr); gap: 48px; }
    .lk-etapes::before { content: ""; position: absolute; inset-inline: 40px; inset-block-start: 34px; border-top: 2px dashed #CFC6EF; z-index: 0; }
}
.lk-etape { position: relative; }
.lk-etape-n { display: flex; align-items: baseline; gap: 14px; font: 600 72px/.9 var(--lk-titre); color: var(--lk-violet); background: var(--lk-papier); padding-inline-end: 14px; width: max-content; position: relative; }
.lk-etape-ic { color: var(--lk-nuit); transform: translateY(-6px); }
.lk-etape h3 { margin-top: 18px; font-size: 26px; font-weight: 600; }
.lk-etape p { margin-top: 8px; color: var(--lk-gris); max-width: 36ch; }

/* ---------- temoignages ---------- */
.lk-temoins { margin-top: 56px; display: grid; gap: 0; border-top: 1px solid var(--lk-filet); }
@media (min-width: 860px) { .lk-temoins { grid-template-columns: repeat(3, 1fr); } .lk-temoin + .lk-temoin { border-inline-start: 1px solid var(--lk-filet); } }
.lk-temoin { padding: 32px 28px 8px; display: flex; flex-direction: column; }
@media (max-width: 859px) { .lk-temoin { padding-inline: 0; } .lk-temoin + .lk-temoin { border-top: 1px solid var(--lk-filet); } }
.lk-guillemet { font: 600 64px/.6 var(--lk-titre); color: var(--lk-violet); height: 30px; }
.lk-temoin blockquote { font-size: 18px; line-height: 1.6; color: var(--lk-encre); flex: 1; margin: 14px 0 22px; }
.lk-temoin figcaption b { display: block; font-weight: 600; color: var(--lk-nuit); }
.lk-temoin figcaption span { font-size: 14px; color: var(--lk-gris); }

/* ---------- tarifs ---------- */
.lk-tarifs { margin: 52px auto 0; display: grid; gap: 20px; max-width: 820px; }
@media (min-width: 720px) { .lk-tarifs { grid-template-columns: 1fr 1fr; } }
.lk-tarif { background: var(--lk-page); border: 1px solid var(--lk-filet); border-radius: 20px; padding: 32px 30px 34px; position: relative; }
.lk-tarif-nom { font: 600 20px/1.2 var(--lk-titre); color: var(--lk-nuit); }
.lk-tarif-prix { margin-top: 14px; font: 600 48px/1 var(--lk-titre); color: var(--lk-violet); letter-spacing: -.02em; }
.lk-tarif-desc { margin-top: 14px; color: var(--lk-gris); white-space: pre-line; }
.lk-tarif ul { margin-top: 18px; display: grid; gap: 8px; list-style: none; padding: 0; }
.lk-tarif li { display: flex; gap: 10px; align-items: baseline; }
.lk-tarif li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--lk-violet); flex: none; transform: translateY(-2px); }
.lk-tarif-subscription { background: var(--lk-nuit); border-color: var(--lk-nuit); color: #E6E1FA; }
.lk-tarif-subscription .lk-tarif-nom { color: #fff; }
.lk-tarif-subscription .lk-tarif-prix { color: #C9BEFF; }
.lk-tarif-subscription .lk-tarif-desc { color: #C8C1E6; }
.lk-tarif-badge { position: absolute; inset-block-start: -13px; inset-inline-end: 24px; background: var(--lk-rec); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.lk-tarifs-notes { margin-top: 30px; text-align: center; color: var(--lk-gris); display: grid; gap: 6px; }
.lk-tarifs-notes b { color: var(--lk-violet); font-weight: 600; }
.lk-tarifs-cta { margin-top: 28px; text-align: center; }

/* ---------- FAQ ---------- */
.lk-faq { margin-top: 44px; border-top: 1px solid var(--lk-filet); }
.lk-faq-item { border-bottom: 1px solid var(--lk-filet); }
.lk-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; text-align: start; font: 500 18px/1.4 var(--lk-texte); color: var(--lk-nuit); background: none; border: 0; cursor: pointer; }
.lk-faq-q:hover { color: var(--lk-violet); }
.lk-faq-plus { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; flex: none; transition: transform .3s var(--lk-ease), background-color .2s; }
.lk-faq-item.is-open .lk-faq-plus { transform: rotate(45deg); background: var(--lk-violet); border-color: var(--lk-violet); color: #fff; }
.lk-faq-r { padding: 0 4px 24px; color: var(--lk-gris); font-size: 16px; max-width: 70ch; }

/* ---------- appel final ---------- */

/* ---------- pied de page ---------- */
.lk-pied { border-top: 1px solid var(--lk-filet); background: var(--lk-papier); color: var(--lk-gris); }
.lk-pied-in { padding-block: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; }
.lk-pied-marque { display: flex; align-items: center; gap: 14px; }
.lk-pied-marque img { height: 22px; }
.lk-pied nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lk-pied a { color: var(--lk-gris); text-decoration: none; }
.lk-pied a:hover { color: var(--lk-violet); text-decoration: underline; }
.lk-pied .lk-pied-mail { color: var(--lk-violet); font-weight: 500; }

/* bandeau cookies (composant partage) : lisible sur papier */
body.lk-v #cookie-consent { background: var(--lk-nuit); border-top: 0; backdrop-filter: none; }
body.lk-v #cookie-consent p { color: #D9D3F5; }
body.lk-v #cookie-consent a { color: #C9BEFF; }
body.lk-v #cookie-consent button:last-child { background: var(--lk-violet); }

/* =====================================================================
   Round 4 (18/09) : moins pale — aplats de couleur, drapeaux, surligneur
   ===================================================================== */
:root { --lk-surligneur: #FFE15A; }

.lk-drapeau { font-family: 'Likta Drapeaux', 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; font-size: 1.15em; line-height: 1; }
/* Regle dure (KB web.md) : logo a gauche, langues a droite, dans les deux sens de lecture */
.lk-nav-in { direction: ltr; }
[dir="rtl"] .lk-nav-liens { direction: rtl; }
.lk-langs a { display: inline-flex; align-items: center; gap: 6px; }
.lk-pays button { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 420px) { .lk-langs a span.lk-code { display: none; } }

/* surligneur : le geste du document annote */
.lk-surligne { background: linear-gradient(transparent 60%, var(--lk-surligneur) 60%, var(--lk-surligneur) 92%, transparent 92%); padding-inline: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* hero : un bureau violet sous l'appel et la feuille */
.lk-hero { position: relative; overflow: hidden; }
.lk-scene::before { content: ""; position: absolute; inset: 40px -40px -40px 60px; background-color: var(--lk-violet); border-radius: 36px; transform: rotate(-2.5deg);
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.2) 1.5px, transparent 1.6px); background-size: 22px 22px; }
[dir="rtl"] .lk-scene::before { inset: 40px 60px -40px -40px; transform: rotate(2.5deg); }
.lk-scene .lk-fleche { color: #fff; }
.lk-appel-ecran { box-shadow: 0 30px 50px -24px rgba(20, 12, 60, .75); }
@media (max-width: 640px) { .lk-scene::before { inset: 30px -16px -24px -16px; border-radius: 26px; } }

/* bandeau des langues */
.lk-langues { background: var(--lk-violet); color: #fff; padding-block: 44px; overflow: hidden; }
.lk-langues-in { display: grid; gap: 22px; align-items: center; }
@media (min-width: 960px) { .lk-langues-in { grid-template-columns: 320px 1fr; gap: 40px; } }
body.lk-v .lk-langues h2 { color: #fff; font-size: 32px; font-weight: 600; line-height: 1.1; }
.lk-langues p { color: #E4DEFF; font-size: 15px; margin-top: 8px; }
.lk-defile { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); direction: ltr; }
.lk-defile-piste { display: flex; gap: 44px; width: max-content; animation: lk-defile 38s linear infinite; }
.lk-defile:hover .lk-defile-piste { animation-play-state: paused; }
.lk-defile-piste span { font: 600 clamp(38px, 5vw, 64px)/1.15 var(--lk-titre); white-space: nowrap; display: inline-flex; align-items: center; gap: 44px; }
.lk-defile-piste span::after { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--lk-surligneur); transform: rotate(45deg); }
@keyframes lk-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lk-defile-piste { animation: none; flex-wrap: wrap; width: auto; } }

/* pour qui : section de nuit, une feuille d'exemple par public */
.lk-pourqui-nuit { background: var(--lk-nuit); border: 0; color: #D9D3F5; }
body.lk-v .lk-pourqui-nuit h2 { color: #fff; }
.lk-pourqui-nuit .lk-intro { color: #C8C1E6; }
.lk-pourqui-nuit .lk-onglet { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.lk-pourqui-nuit .lk-onglet svg { color: #C9BEFF; }
.lk-pourqui-nuit .lk-onglet:hover { border-color: #C9BEFF; }
.lk-pourqui-nuit .lk-onglet[aria-selected="true"] { background: #fff; color: var(--lk-nuit); border-color: #fff; }
.lk-pourqui-nuit .lk-onglet[aria-selected="true"] svg { color: var(--lk-violet); }
.lk-exemple { margin-top: 44px; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .lk-exemple { grid-template-columns: 1fr 1fr; gap: 72px; } }
.lk-pourqui-nuit .lk-panneau { margin-top: 0; min-height: 0; }
.lk-pourqui-nuit .lk-panneau-tag { color: #fff; font-family: var(--lk-titre); font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
.lk-pourqui-nuit .lk-panneau p:not(.lk-panneau-tag) { color: #D9D3F5; }
.lk-mini-doc { background: var(--lk-page); color: var(--lk-encre); border-radius: 6px; padding: 28px 30px 32px; transform: rotate(-1.5deg); box-shadow: 0 34px 60px -30px rgba(0,0,0,.7); position: relative; width: 100%; }
[dir="rtl"] .lk-mini-doc { transform: rotate(1.5deg); }
.lk-mini-pile { position: relative; justify-self: center; width: 100%; max-width: 460px; }
.lk-mini-pile::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: #8C7DE0; border-radius: 6px; transform: rotate(3deg); }
.lk-mini-doc-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--lk-gris); padding-bottom: 12px; border-bottom: 1px solid var(--lk-filet); }
.lk-mini-doc-meta b { color: var(--lk-violet); font-weight: 600; }
.lk-mini-doc .lk-mini-doc-t { font: 700 25px/1.2 var(--lk-doc); color: var(--lk-nuit); margin-top: 16px; }
.lk-mini-doc p { font: 400 16px/1.6 var(--lk-doc); margin-top: 10px; }
.lk-mini-doc i { display: block; height: 7px; border-radius: 4px; background: var(--lk-filet); margin-top: 11px; }
.lk-mini-doc i:nth-of-type(2) { width: 88%; }
.lk-mini-doc i:nth-of-type(3) { width: 64%; }

/* etapes illustrees */
.lk-etapes::before { display: none; }
.lk-etape-illu { height: 170px; border-radius: 24px; display: grid; place-items: center; margin-bottom: 22px; position: relative; overflow: hidden; }
.lk-etape:nth-child(1) .lk-etape-illu { background: var(--lk-violet); color: #fff; }
.lk-etape:nth-child(2) .lk-etape-illu { background: var(--lk-pale); color: var(--lk-violet); }
.lk-etape:nth-child(3) .lk-etape-illu { background: var(--lk-surligneur); color: var(--lk-nuit); }
.lk-etape-illu .lk-etape-num { position: absolute; inset-block-start: 14px; inset-inline-start: 20px; font: 600 44px/1 var(--lk-titre); opacity: .9; }
.lk-etape h3 { margin-top: 0; }

/* capacites en mosaique */
.lk-capas { margin-top: 48px; display: grid; gap: 16px; }
@media (min-width: 760px) { .lk-capas { grid-template-columns: repeat(6, 1fr); } }
.lk-capa { border-radius: 24px; padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
body.lk-v .lk-capa h3 { font-size: 24px; font-weight: 600; line-height: 1.15; color: inherit; }
.lk-capa p { font-size: 15.5px; }
.lk-capa > svg { margin-bottom: auto; }
@media (min-width: 760px) {
    .lk-capa:nth-child(1) { grid-column: span 4; }
    .lk-capa:nth-child(n+2) { grid-column: span 2; }
}
.lk-capa:nth-child(1) { background: var(--lk-nuit); color: #D9D3F5; }
body.lk-v .lk-capa:nth-child(1) h3 { color: #fff; }
.lk-capa:nth-child(2) { background: var(--lk-surligneur); color: #3D3300; }
.lk-capa:nth-child(3) { background: var(--lk-page); box-shadow: inset 0 0 0 1px var(--lk-filet); color: var(--lk-gris); }
body.lk-v .lk-capa:nth-child(3) h3 { color: var(--lk-nuit); }
.lk-capa:nth-child(4) { background: var(--lk-violet); color: #EAE5FF; }
body.lk-v .lk-capa:nth-child(4) h3 { color: #fff; }
.lk-capa:nth-child(5) { background: var(--lk-pale); color: #3B3160; }

.lk-capa-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lk-capa-langs span { font: 600 15px/1 var(--lk-titre); padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; }

/* temoignages en cartes colorees */
.lk-temoins { border-top: 0; gap: 18px; }
.lk-temoins .lk-temoin { border-radius: 24px; padding: 30px 28px 28px; border: 0; }
.lk-temoin:nth-child(1) { background: var(--lk-pale); }
.lk-temoin:nth-child(2) { background: var(--lk-page); box-shadow: inset 0 0 0 1px var(--lk-filet); }
.lk-temoin:nth-child(3) { background: #FFF1B0; }
.lk-temoin figcaption { display: flex; align-items: center; gap: 12px; }
.lk-temoin figcaption div { display: flex; flex-direction: column; }
.lk-temoin .lk-initiales { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 600 16px/1 var(--lk-titre); color: #fff; background: var(--lk-violet); }
.lk-temoin:nth-child(2) span.lk-initiales { background: var(--lk-nuit); }
.lk-temoin:nth-child(3) span.lk-initiales { background: #8A6400; }

/* =====================================================================
   Round 5 (18/09) : pages interieures (produit, a propos, blog, legal,
   connexion, 404) dans la meme identite
   ===================================================================== */

/* bandeau-titre de page : aplat violet pointille */
.lk-page-hero { background-color: var(--lk-violet); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1.5px, transparent 1.6px); background-size: 22px 22px; color: #EAE5FF; padding-block: clamp(56px, 8vw, 104px); }
body.lk-v .lk-page-hero h1 { color: #fff; font-size: clamp(40px, 6vw, 72px); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; max-width: 18ch; }
.lk-page-hero p { margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px); max-width: 58ch; color: #E4DEFF; }
.lk-page-hero-meta { margin-top: 14px; font-size: 14px; color: #D4CCFF; }
.lk-page-hero .lk-surligne { color: var(--lk-nuit); }

.lk-bloc { padding-block: clamp(56px, 7vw, 96px); }
.lk-bloc + .lk-bloc { padding-top: 0; }

/* liste cochee */
.lk-coches { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 16px; }
.lk-coches li { display: flex; gap: 14px; align-items: flex-start; }
.lk-coches li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
    background: var(--lk-surligneur) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231A55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 16px no-repeat; }
.lk-coches b { color: #fff; font-weight: 600; }

/* bloc de nuit (comparaison, approche) */
.lk-nuit { background: var(--lk-nuit); color: #D9D3F5; border-radius: 28px; padding: clamp(36px, 5vw, 64px); }
body.lk-v .lk-nuit h2 { color: #fff; }
.lk-nuit p { margin-top: 14px; font-size: 18px; max-width: 62ch; }

/* produit : etapes detaillees */
.lk-parcours { margin-top: 44px; display: grid; gap: 18px; }
.lk-parcours-etape { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; background: var(--lk-page); border-radius: 24px; padding: 28px; box-shadow: inset 0 0 0 1px var(--lk-filet); }
.lk-parcours-n { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font: 600 32px/1 var(--lk-titre); color: #fff; background: var(--lk-violet); }
.lk-parcours-etape:nth-child(2) .lk-parcours-n { background: var(--lk-nuit); }
.lk-parcours-etape:nth-child(3) .lk-parcours-n { background: var(--lk-surligneur); color: var(--lk-nuit); }
body.lk-v .lk-parcours-etape h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; line-height: 1.15; }
.lk-parcours-etape p { margin-top: 8px; color: var(--lk-encre); }
.lk-parcours-etape .lk-detail { margin-top: 12px; font: 400 16px/1.55 var(--lk-doc); color: var(--lk-gris); padding-inline-start: 14px; border-inline-start: 2px solid #CFC6EF; }
@media (max-width: 560px) { .lk-parcours-etape { grid-template-columns: 1fr; } }

.lk-capas-6 .lk-capa:nth-child(6) { background: var(--lk-page); box-shadow: inset 0 0 0 1px var(--lk-filet); color: var(--lk-gris); }
body.lk-v .lk-capas-6 .lk-capa:nth-child(6) h3 { color: var(--lk-nuit); }
@media (min-width: 760px) { .lk-capas-6 .lk-capa:nth-child(6) { grid-column: span 6; flex-direction: row; align-items: center; gap: 24px; min-height: 0; } .lk-capas-6 .lk-capa:nth-child(6) > svg { margin: 0; flex: none; } }

/* cas d'usage colores */
.lk-usages { margin-top: 44px; display: grid; gap: 18px; }
@media (min-width: 760px) { .lk-usages { grid-template-columns: 1fr 1fr; } }
.lk-usage { border-radius: 24px; padding: 30px 30px 32px; }
.lk-usage:nth-child(1) { background: var(--lk-pale); }
.lk-usage:nth-child(2) { background: var(--lk-page); box-shadow: inset 0 0 0 1px var(--lk-filet); }
.lk-usage:nth-child(3) { background: var(--lk-page); box-shadow: inset 0 0 0 1px var(--lk-filet); }
.lk-usage:nth-child(4) { background: #FFF1B0; }
body.lk-v .lk-usage h3 { font-size: 24px; font-weight: 600; line-height: 1.15; }
.lk-usage p { margin-top: 10px; color: var(--lk-gris); }
.lk-usage .lk-issue { margin-top: 16px; font-weight: 500; color: var(--lk-nuit); }

/* a propos */
.lk-mission { font: 500 clamp(22px, 2.6vw, 30px)/1.45 var(--lk-doc); color: var(--lk-nuit); max-width: 34em; }
.lk-raisons { margin-top: 44px; display: grid; gap: 18px; }
@media (min-width: 860px) { .lk-raisons { grid-template-columns: repeat(3, 1fr); } }
.lk-raison { border-radius: 24px; padding: 30px 28px 32px; display: flex; flex-direction: column; gap: 12px; min-height: 250px; }
.lk-raison > svg { margin-bottom: auto; }
body.lk-v .lk-raison h3 { font-size: 24px; font-weight: 600; line-height: 1.15; color: inherit; }
.lk-raison:nth-child(1) { background: var(--lk-violet); color: #EAE5FF; }
body.lk-v .lk-raison:nth-child(1) h3 { color: #fff; }
.lk-raison:nth-child(2) { background: var(--lk-surligneur); color: #3D3300; }
.lk-raison:nth-child(3) { background: var(--lk-nuit); color: #D9D3F5; }
body.lk-v .lk-raison:nth-child(3) h3 { color: #fff; }
.lk-fondatrice { margin-top: 36px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; background: var(--lk-page); border-radius: 24px; padding: clamp(28px, 4vw, 44px); box-shadow: inset 0 0 0 1px var(--lk-filet); }
@media (max-width: 560px) { .lk-fondatrice { grid-template-columns: 1fr; } }
.lk-avatar { width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; background: var(--lk-violet); color: #fff; font: 600 34px/1 var(--lk-titre); transform: rotate(-4deg); }
.lk-fondatrice-nom { font: 600 26px/1.2 var(--lk-titre); color: var(--lk-nuit); }
.lk-fondatrice-role { color: var(--lk-violet); font-weight: 500; margin-top: 2px; }
.lk-fondatrice p { margin-top: 12px; color: var(--lk-encre); }
.lk-fondatrice a { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--lk-violet); font-weight: 500; }
.lk-equipe-note { margin-top: 20px; color: var(--lk-gris); max-width: 70ch; }
.lk-infos { margin-top: 18px; display: grid; gap: 18px; }
@media (min-width: 760px) { .lk-infos { grid-template-columns: 1fr 1fr; } }
.lk-info { border-radius: 24px; padding: 30px; }
.lk-info:nth-child(1) { background: var(--lk-pale); }
.lk-info:nth-child(2) { background: var(--lk-nuit); color: #D9D3F5; }
body.lk-v .lk-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 14px; }
body.lk-v .lk-info:nth-child(2) h3 { color: #fff; }
.lk-info dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; }
.lk-info dt { color: var(--lk-gris); }
.lk-info dd { color: var(--lk-nuit); font-weight: 500; margin: 0; }
.lk-info dd a { color: var(--lk-violet); }
.lk-info .lk-btn { margin-top: 20px; }

/* blog : chaque article est une feuille */
.lk-articles { display: grid; gap: 40px; }
.lk-article { background: var(--lk-page); border-radius: 6px; padding: clamp(28px, 5vw, 56px); box-shadow: var(--lk-ombre-feuille); }
.lk-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--lk-gris); }
.lk-puce { font: 600 13px/1 var(--lk-texte); padding: 7px 11px; border-radius: 999px; background: var(--lk-pale); color: var(--lk-violet); }
body.lk-v .lk-article h2 { margin-top: 18px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; line-height: 1.1; }
.lk-article-corps { margin-top: 20px; font: 400 18px/1.7 var(--lk-doc); color: var(--lk-encre); max-width: 68ch; }
.lk-article-corps > * + * { margin-top: 16px; }
.lk-article-corps .lk-chapo { font-size: 21px; color: var(--lk-nuit); }
body.lk-v .lk-article-corps h3 { font-size: 24px; font-weight: 600; margin-top: 30px; font-family: var(--lk-titre); }
.lk-article:nth-child(2) { transform: rotate(-.4deg); }

/* pages legales */
.lk-legal { display: grid; gap: 14px; }
.lk-legal-section { background: var(--lk-page); border-radius: 20px; padding: 28px 30px; box-shadow: inset 0 0 0 1px var(--lk-filet); }
body.lk-v .lk-legal-section h2 { font-size: 22px; font-weight: 600; line-height: 1.2; }
.lk-legal-section p { margin-top: 10px; color: var(--lk-encre); white-space: pre-line; }
.lk-legal-section ul { margin-top: 12px; padding-inline-start: 20px; display: grid; gap: 6px; }
.lk-legal-section a { color: var(--lk-violet); font-weight: 500; }

/* connexion */
.lk-connexion { min-height: calc(100vh - 64px - 90px); display: grid; place-items: center; padding: 48px 16px; }
.lk-connexion-carte { width: min(960px, 100%); display: grid; border-radius: 28px; overflow: hidden; background: var(--lk-page); box-shadow: 0 40px 70px -40px rgba(35, 26, 85, .55), inset 0 0 0 1px var(--lk-filet); }
@media (min-width: 820px) { .lk-connexion-carte { grid-template-columns: 1fr 1.05fr; } }
.lk-connexion-g { background-color: var(--lk-nuit); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1.5px, transparent 1.6px); background-size: 22px 22px; color: #D9D3F5; padding: 44px 40px; display: flex; flex-direction: column; gap: 28px; }
.lk-connexion-g img { height: 44px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); }
.lk-connexion-g > p { font-size: 17px; }
.lk-connexion-etapes { display: grid; gap: 14px; }
.lk-connexion-etapes div { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.06); border-radius: 14px; padding: 14px 16px; color: #fff; }
.lk-connexion-etapes b { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font: 600 16px/1 var(--lk-titre); background: var(--lk-violet); color: #fff; }
.lk-connexion-etapes div:nth-child(2) b { background: var(--lk-surligneur); color: var(--lk-nuit); }
.lk-connexion-etapes div:nth-child(3) b { background: #fff; color: var(--lk-nuit); }
.lk-connexion-promo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.lk-connexion-promo span { font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); }
.lk-connexion-d { padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
body.lk-v .lk-connexion-d h1 { font-size: clamp(32px, 3.6vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.lk-connexion-d .lk-sous { margin-top: 10px; font-size: 18px; color: var(--lk-gris); }
.lk-google { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; border-radius: 14px; background: var(--lk-page); color: var(--lk-nuit); font: 600 16px/1 var(--lk-texte); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--lk-filet), 0 8px 18px -12px rgba(35, 26, 85, .5); transition: box-shadow .2s, transform .2s var(--lk-ease); }
.lk-google:hover { box-shadow: inset 0 0 0 1.5px var(--lk-violet), 0 12px 22px -12px rgba(90, 63, 217, .6); transform: translateY(-1px); }
.lk-google svg { width: 22px; height: 22px; }
.lk-connexion-note { margin-top: 22px; background: var(--lk-pale); color: #3B3160; border-radius: 14px; padding: 16px 18px; font-size: 14px; line-height: 1.6; }

/* 404 */
.lk-404 { min-height: 64vh; display: grid; place-items: center; text-align: center; padding: 64px 16px; }
body.lk-v .lk-404-n { font: 600 clamp(120px, 20vw, 200px)/.9 var(--lk-titre); color: var(--lk-violet); letter-spacing: -.03em; }
.lk-404-n .lk-traits { height: .45em; gap: .06em; color: var(--lk-surligneur); vertical-align: .1em; margin-inline: .08em; }
.lk-404-n .lk-traits i { width: .09em; border-radius: .05em; }
body.lk-v .lk-404 h1 { margin-top: 18px; font-size: 28px; font-weight: 600; }
.lk-404 p { margin-top: 8px; color: var(--lk-gris); }
.lk-404 .lk-btn { margin-top: 28px; }
[dir="rtl"] .lk-404 .lk-btn svg, [dir="rtl"] .lk-btn-retour svg { transform: none; }
.lk-btn-retour svg { transform: scaleX(-1); }

/* =====================================================================
   Round 7 (18/09) : bloc d'appel final refait (« la box etait moche »)
   Bandeau pleine largeur, titre surligne a gauche, carte-billet a droite.
   ===================================================================== */

.lk-bande { background-color: var(--lk-violet); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1.5px, transparent 1.6px); background-size: 22px 22px; color: #EAE5FF; position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); }
.lk-bande::after { content: ""; position: absolute; inset-block-end: -60px; inset-inline-end: -40px; width: 340px; height: 300px; opacity: .14; pointer-events: none;
    background: linear-gradient(#fff, #fff) 0 100% / 70px 55% no-repeat, linear-gradient(#fff, #fff) 135px 100% / 70px 100% no-repeat, linear-gradient(#fff, #fff) 270px 100% / 70px 55% no-repeat; border-radius: 40px; }
.lk-bande-grille { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .lk-bande-grille { grid-template-columns: 1.15fr .85fr; gap: 72px; } }
body.lk-v .lk-bande h2 { color: #fff; font-size: clamp(38px, 5.4vw, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; }
.lk-bande h2 .lk-surligne { color: var(--lk-nuit); }
.lk-bande-sous { margin-top: 20px; font-size: 19px; color: #E4DEFF; max-width: 40ch; }
.lk-billet { background: var(--lk-page); color: var(--lk-encre); border-radius: 24px; padding: 30px 30px 32px; box-shadow: 0 40px 70px -34px rgba(20, 12, 60, .75); justify-self: center; width: min(460px, 100%); position: relative; }
.lk-billet::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: var(--lk-surligneur); border-radius: 24px; z-index: -1; transform: rotate(4deg); }
.lk-billet-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--lk-gris); }
.lk-billet .lk-numero { margin-top: 12px; box-shadow: none; background: var(--lk-papier); }
.lk-billet .lk-btn { margin-top: 18px; width: 100%; justify-content: center; }
.lk-billet-note { margin-top: 12px; text-align: center; font-size: 14px; color: var(--lk-gris); }
.lk-billet-seul .lk-btn { margin-top: 0; }
@media (max-width: 480px) { .lk-billet .lk-numero { flex-wrap: wrap; } .lk-billet { padding: 24px 20px 26px; } }