/*! ═══════════════════════════════════════════════════════════════════════════
* spiKto UI v1.0
* ────────────────────────────────────────────────────────────────────────
* Système de design CSS-only inspiré du Bauhaus / éditorial swiss.
*
* Caractéristiques :
* • Palette : crème + noir + magenta + jaune + cyan + vert
* • Typographie : Inter Black (titres) + Permanent Marker (logo) + Lora (serif)
* • Pas de border-radius (formes carrées, brutes)
* • Ombres décalées (style sticker offset 4-10px)
* • Hover : translate négatif + ombre colorée
*
* Polices requises (Google Fonts) :
*
*
* Préfixe : .k-* (pour "kiosque", clin d'œil au style éditorial)
*
* Licence : MIT
* ════════════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════════
1. DESIGN TOKENS
Variables CSS — couleurs, ombres, easing.
Surchargez-les sur :root pour personnaliser le thème.
═════════════════════════════════════════════════════════════════════════ */
:root{
/* ── Couleurs principales ── */
--k-cream: #F4EFE5; /* fond principal — crème chaud */
--k-cream-2: #F0EAD9; /* fond secondaire — crème plus saturé */
--k-black: #0F0F0F; /* noir profond (presque pur) */
--k-magenta: #EC1C7C; /* accent primaire — rose vif */
--k-magenta-dk: #C81469; /* magenta foncé (hover) */
--k-yellow: #FFD60A; /* accent jaune doré */
--k-cyan: #3DB8E8; /* accent cyan/bleu */
--k-green: #8BC53F; /* accent vert citron */
/* ── Couleurs sémantiques ── */
--k-ink: #0F0F0F; /* texte principal (≈ black) */
--k-ink-soft: #6B6B6B; /* texte secondaire (gris) */
--k-ink-mute: #9A9382; /* texte tertiaire (gris pâle) */
--k-ink-dark: #999999; /* texte sur fond noir (light gray) */
--k-line: #DDD5C4; /* bordures fines / séparateurs */
--k-line-dk: #2A2A2A; /* bordures fines sur fond noir */
/* ── Ombres décalées (style "sticker") ── */
--k-shadow-sm: 4px 4px 0 var(--k-black);
--k-shadow: 6px 6px 0 var(--k-black);
--k-shadow-lg: 10px 10px 0 var(--k-black);
/* ── Easing standard ── */
--k-ease: cubic-bezier(.4, 0, .2, 1);
/* ── Coins (par défaut : carrés) ── */
--k-radius-sm: 0;
--k-radius: 0;
--k-radius-pill: 999px;
}
/* ═════════════════════════════════════════════════════════════════════════
2. RESET & BASE
Reset minimal scopé à l'intérieur des classes .k-* pour ne pas casser
le reste du site qui pourrait avoir ses propres styles.
Si vous utilisez la lib en standalone, appliquez .k-page sur .
═════════════════════════════════════════════════════════════════════════ */
.k-page,
.k-page *,
.k-page *::before,
.k-page *::after{box-sizing:border-box}
.k-page{
font-family:'Inter',system-ui,sans-serif;
font-size:16px;line-height:1.55;
color:var(--k-ink);
background:var(--k-cream);
font-weight:400;
-webkit-font-smoothing:antialiased;
margin:0;
overflow-x:hidden;
}
.k-page p{margin:0}
.k-page ul, .k-page ol{list-style:none;margin:0;padding:0}
.k-page img{max-width:100%;height:auto}
.k-page a{color:inherit;text-decoration:none}
.k-page button{font-family:inherit;border:0;background:none;cursor:pointer}
/* Headings — pas de couleur forcée pour permettre l'héritage par section */
.k-page h1, .k-page h2, .k-page h3, .k-page h4{
font-family:'Inter',sans-serif;
font-weight:900;
letter-spacing:-.025em;
line-height:1;
margin:0;
}
/* ═════════════════════════════════════════════════════════════════════════
3. LAYOUT PRIMITIVES
• .k-inner : container max-width centré (1280px)
• .k-pagefoot : bandeau "− SECTION ... SITE.COM · YEAR" en bas de section
═════════════════════════════════════════════════════════════════════════ */
.k-inner{
max-width:1280px;
margin:0 auto;
padding:0 32px;
}
.k-pagefoot{
display:flex;justify-content:space-between;align-items:center;
padding:24px 32px 40px;
font-size:11px;color:var(--k-ink-soft);
letter-spacing:.14em;text-transform:uppercase;
font-weight:500;
max-width:1280px;margin:0 auto;
}
.k-pagefoot--dark{color:var(--k-ink-dark);background:var(--k-black);max-width:none}
.k-pagefoot--dark > *{max-width:1280px;margin:0 auto}
/* ═════════════════════════════════════════════════════════════════════════
4. LOGO MARKER
Logo manuscrit avec Permanent Marker.
Usage : prefixsuffix.com
.lec → couleur magenta sur le préfixe optionnel
═════════════════════════════════════════════════════════════════════════ */
.k-logo{
font-family:'Permanent Marker',cursive;
font-size:22px;color:var(--k-ink);
letter-spacing:-.01em;
display:inline-block;
}
.k-logo .lec{color:var(--k-magenta)}
/* ═════════════════════════════════════════════════════════════════════════
5. EYEBROW
Petite étiquette caps espacée au-dessus des titres.
Usage : Catégorie
═════════════════════════════════════════════════════════════════════════ */
.k-eyebrow{
display:inline-block;
font-size:11px;font-weight:500;
color:var(--k-ink-soft);
letter-spacing:.18em;
text-transform:uppercase;
margin-bottom:24px;
}
.k-eyebrow--white {color:var(--k-ink-dark)} /* sur fond sombre */
.k-eyebrow--magenta{color:var(--k-magenta)} /* accent */
/* ═════════════════════════════════════════════════════════════════════════
6. NAV
Navigation top sticky avec backdrop-blur.
Structure :
Ajouter .scrolled via JS pour montrer la bordure inférieure.
═════════════════════════════════════════════════════════════════════════ */
.k-nav{
position:sticky;top:0;z-index:60;
background:rgba(244,239,229,.92);
backdrop-filter:blur(10px);
border-bottom:1px solid transparent;
transition:border-color .25s var(--k-ease);
}
.k-nav.scrolled{border-bottom-color:var(--k-line)}
.k-nav__inner{
max-width:1280px;margin:0 auto;
padding:18px 32px;
display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.k-nav__center{display:flex;gap:32px;align-items:center}
.k-nav__center a{font-size:14px;font-weight:500;color:var(--k-ink)}
.k-nav__center a:hover{color:var(--k-magenta)}
.k-nav__right{display:flex;gap:10px;align-items:center}
/* Tag "corner" type pillule magenta dans la nav */
.k-tag-corner{
display:inline-flex;align-items:center;gap:8px;
padding:5px 14px;
border:1.5px solid var(--k-magenta);color:var(--k-magenta);
border-radius:var(--k-radius-pill);
font-size:11px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;
}
.k-tag-corner__dot{
width:6px;height:6px;border-radius:50%;
background:var(--k-magenta);
}
/* Avatar utilisateur connecté */
.k-nav__user{
display:flex;align-items:center;gap:10px;
font-size:14px;color:var(--k-ink);
padding:6px 12px;
transition:background .25s var(--k-ease);
text-decoration:none;
}
.k-nav__user:hover{background:var(--k-cream-2)}
.k-nav__avatar{
width:32px;height:32px;
background:var(--k-magenta);color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-weight:900;font-size:14px;
border:1.5px solid var(--k-ink);
}
.k-nav__user-name{font-weight:600;font-size:13px}
.k-nav__logout{
background:none;border:1.5px solid var(--k-ink);
width:38px;height:38px;
display:inline-flex;align-items:center;justify-content:center;
font-size:18px;cursor:pointer;
transition:all .25s var(--k-ease);
}
.k-nav__logout:hover{background:var(--k-ink);color:var(--k-cream)}
/* ═════════════════════════════════════════════════════════════════════════
7. BUTTONS
Boutons full-pillule avec effet sticker au hover.
Variants :
.k-btn → noir (par défaut)
.k-btn--magenta → magenta plein, blanc
.k-btn--yellow → jaune, ink
.k-btn--ghost → transparent + bordure ink
Modificateurs :
.k-btn--sm → version compacte
.k-btn--full → 100% largeur
Usage : CTA →
═════════════════════════════════════════════════════════════════════════ */
.k-btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 26px;
background:var(--k-ink);color:var(--k-cream);
font-family:'Inter',sans-serif;
font-weight:700;font-size:14px;
border:none;cursor:pointer;
border-radius:0;
transition:all .25s var(--k-ease);
letter-spacing:.005em;
text-decoration:none;
}
.k-btn:hover{
transform:translate(-2px,-2px);
box-shadow:6px 6px 0 var(--k-magenta);
}
.k-btn--magenta{background:var(--k-magenta);color:#fff}
.k-btn--magenta:hover{box-shadow:6px 6px 0 var(--k-ink)}
.k-btn--yellow{background:var(--k-yellow);color:var(--k-ink)}
.k-btn--yellow:hover{box-shadow:6px 6px 0 var(--k-ink)}
.k-btn--ghost{
background:transparent;color:var(--k-ink);
box-shadow:inset 0 0 0 2px var(--k-ink);
}
.k-btn--ghost:hover{
transform:translate(-2px,-2px);
box-shadow:inset 0 0 0 2px var(--k-ink), 6px 6px 0 var(--k-ink);
}
.k-btn--sm{padding:9px 18px;font-size:12.5px}
.k-btn--full{width:100%;justify-content:center;padding:16px 24px;font-size:15px}
.k-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.k-btn .arr{font-weight:400;transition:transform .25s var(--k-ease)}
.k-btn:hover .arr{transform:translateX(3px)}
/* ═════════════════════════════════════════════════════════════════════════
8. STICKER (picto avec ombre décalée noire)
Applicable à n'importe quelle ![]()
ou bloc carré pour effet "sticker".
Usage : 
═════════════════════════════════════════════════════════════════════════ */
.k-sticker {filter:drop-shadow(4px 4px 0 var(--k-ink))}
.k-sticker--md {filter:drop-shadow(6px 6px 0 var(--k-ink))}
.k-sticker--lg {filter:drop-shadow(8px 8px 0 var(--k-ink))}
/* Animation flottante pour pictos décoratifs */
@keyframes k-floaty{
0%,100%{transform:translateY(0) rotate(0)}
50% {transform:translateY(-12px) rotate(4deg)}
}
.k-floaty {animation:k-floaty 8s ease-in-out infinite}
.k-floaty--slow {animation:k-floaty 12s ease-in-out infinite}
.k-floaty--fast {animation:k-floaty 5s ease-in-out infinite}
/* ═════════════════════════════════════════════════════════════════════════
9. FORMS — inputs, labels, password toggle, select, textarea
Usage :
═════════════════════════════════════════════════════════════════════════ */
.k-form-group{margin-bottom:20px}
.k-form-group label{
display:block;
font-size:11px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;
color:var(--k-ink);margin-bottom:8px;
}
.k-form-group label small{
font-size:11px;font-weight:500;color:var(--k-ink-soft);
letter-spacing:0;text-transform:none;
margin-left:6px;
}
.k-input{
width:100%;
padding:14px 16px;
border:1.5px solid var(--k-line);
background:#fff;
font-family:'Inter',sans-serif;
font-size:15px;
color:var(--k-ink);
border-radius:0;
transition:border-color .25s var(--k-ease);
}
.k-input:focus{
border-color:var(--k-magenta);
outline:none;
}
.k-input::placeholder{color:var(--k-ink-mute)}
.k-page select{
width:100%;
padding:13px 16px;
border:1.5px solid var(--k-line);
background:#fff;
font-family:'Inter',sans-serif;
font-size:14.5px;color:var(--k-ink);
cursor:pointer;
border-radius:0;
}
.k-page select:focus{outline:none;border-color:var(--k-magenta)}
.k-page textarea{
width:100%;
padding:14px 16px;
border:1.5px solid var(--k-line);
background:#fff;
font-family:'Inter',sans-serif;
font-size:14.5px;color:var(--k-ink);
resize:vertical;line-height:1.55;
transition:border-color .25s var(--k-ease);
border-radius:0;
}
.k-page textarea:focus{outline:none;border-color:var(--k-magenta)}
/* Input avec bouton toggle (eye / show password) */
.k-input-with-toggle{position:relative}
.k-input-with-toggle .k-input{padding-right:46px}
.k-input-toggle{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
background:none;border:0;cursor:pointer;
font-size:16px;color:var(--k-ink-soft);
padding:6px;
transition:color .2s var(--k-ease);
}
.k-input-toggle:hover{color:var(--k-ink)}
.k-form-hint{
margin-top:8px;
font-size:13px;color:var(--k-ink-soft);
}
.k-form-hint a{color:var(--k-magenta);font-weight:600}
.k-form-hint a:hover{text-decoration:underline}
/* ═════════════════════════════════════════════════════════════════════════
10. CARDS
Card de base : fond blanc, bordure 1.5px noire, hover translate + ombre.
Variantes :
.k-card → blanc
.k-card--cream → fond crème
.k-card--black → fond noir, texte cream
.k-card--yellow → fond jaune (CTA fort)
.k-card--magenta → fond magenta blanc
Modificateurs :
.k-card--hover → ajoute l'effet translate+ombre au survol
.k-card--sticker → ombre décalée 6×6 par défaut (style sticker)
═════════════════════════════════════════════════════════════════════════ */
.k-card{
background:#fff;
border:1.5px solid var(--k-ink);
padding:24px 28px;
position:relative;
}
.k-card--cream {background:var(--k-cream-2)}
.k-card--black {background:var(--k-black);color:var(--k-cream)}
.k-card--yellow {background:var(--k-yellow);color:var(--k-ink)}
.k-card--magenta{background:var(--k-magenta);color:#fff}
.k-card--sticker{box-shadow:var(--k-shadow)}
.k-card--hover {transition:transform .25s var(--k-ease),box-shadow .25s var(--k-ease);cursor:pointer}
.k-card--hover:hover{
transform:translate(-3px,-3px);
box-shadow:6px 6px 0 var(--k-ink);
}
.k-card__head{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:18px;flex-wrap:wrap;gap:10px;
}
.k-card__title{
font-size:18px;font-weight:900;letter-spacing:-.005em;line-height:1;
}
.k-card__title-sub{
font-size:13px;color:var(--k-ink-soft);font-weight:500;
margin-top:4px;
}
/* ═════════════════════════════════════════════════════════════════════════
11. BADGES
Étiquettes courtes pour statuts ou catégories.
Variantes : --admin, --user, --premium, --inscrit, --public, --ok, --warn
═════════════════════════════════════════════════════════════════════════ */
.k-badge{
display:inline-block;
padding:3px 10px;
font-size:11px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;
border:1.5px solid var(--k-ink);
}
.k-badge--admin {background:var(--k-magenta);color:#fff;border-color:var(--k-magenta)}
.k-badge--user {background:#fff;color:var(--k-ink)}
.k-badge--premium {background:var(--k-yellow);color:var(--k-ink)}
.k-badge--inscrit {background:var(--k-cyan);color:var(--k-ink)}
.k-badge--public {background:var(--k-cream-2);color:var(--k-ink-soft)}
.k-badge--ok {background:var(--k-green);color:#fff;border-color:var(--k-green)}
.k-badge--warn {background:var(--k-yellow);color:var(--k-ink)}
/* ═════════════════════════════════════════════════════════════════════════
12. ALERTS
Messages d'alerte — succès / erreur / info.
Usage : Message
═════════════════════════════════════════════════════════════════════════ */
.k-alert{
padding:14px 16px;
border:1.5px solid var(--k-magenta);
background:rgba(236,28,124,.06);
color:var(--k-ink);
margin-bottom:24px;
font-size:14px;line-height:1.55;
}
.k-alert--ok{
border-color:var(--k-green);
background:rgba(139,197,63,.10);
}
.k-alert--warn{
border-color:var(--k-yellow);
background:rgba(255,214,10,.15);
}
.k-alert div + div{margin-top:4px}
/* ═════════════════════════════════════════════════════════════════════════
13. PILLS / TABS
Onglets ou boutons pillules à sélection.
Variantes : .k-pill (par défaut) / .is-active
═════════════════════════════════════════════════════════════════════════ */
.k-pills{display:flex;gap:8px;flex-wrap:wrap}
.k-pill{
background:#fff;
border:1.5px solid var(--k-ink);
padding:8px 14px;
font-family:'Inter',sans-serif;
font-size:13px;font-weight:700;
cursor:pointer;
transition:all .25s var(--k-ease);
color:var(--k-ink);text-decoration:none;
display:inline-flex;align-items:center;gap:6px;
}
.k-pill:hover{background:var(--k-cream-2)}
.k-pill.is-active{
background:var(--k-magenta);color:#fff;border-color:var(--k-magenta);
}
/* Tabs en barre unique avec séparateurs internes */
.k-tabs{
display:flex;gap:0;
border:1.5px solid var(--k-ink);
}
.k-tab{
flex:1;
background:#fff;border:0;
padding:12px 18px;
font-family:'Inter',sans-serif;
font-size:13.5px;font-weight:700;
letter-spacing:.04em;text-transform:uppercase;
color:var(--k-ink-soft);
cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
transition:all .2s var(--k-ease);
border-right:1.5px solid var(--k-ink);
text-decoration:none;
}
.k-tab:last-child{border-right:0}
.k-tab.is-active{background:var(--k-ink);color:var(--k-cream)}
.k-tab:hover:not(.is-active){background:var(--k-cream-2)}
/* ═════════════════════════════════════════════════════════════════════════
14. TABLES
Tables épurées avec headers caps espacés.
Usage :
Cellules monospace : … |
═════════════════════════════════════════════════════════════════════════ */
.k-table-wrap{overflow-x:auto}
.k-table{
width:100%;border-collapse:collapse;
font-size:14px;
}
.k-table th,
.k-table td{
padding:12px 14px;
text-align:left;
border-bottom:1px solid var(--k-line);
}
.k-table th{
font-size:11px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;
color:var(--k-ink-soft);
background:var(--k-cream-2);
border-bottom:1.5px solid var(--k-ink);
}
.k-table tr:hover td{background:var(--k-cream)}
.k-table td.num,
.k-table td.mono{font-family:monospace;font-size:13px;color:var(--k-ink-soft)}
/* ═════════════════════════════════════════════════════════════════════════
15. TOGGLE / CHECKBOX
Cases à cocher dans un bloc cliquable.
═════════════════════════════════════════════════════════════════════════ */
.k-toggle{
display:flex;align-items:center;gap:14px;cursor:pointer;
padding:14px 18px;
background:var(--k-cream-2);
border:1.5px solid var(--k-line);
font-size:14px;color:var(--k-ink);font-weight:600;
transition:all .25s var(--k-ease);
}
.k-toggle:hover{border-color:var(--k-ink)}
.k-toggle input[type=checkbox],
.k-toggle input[type=radio]{
width:18px;height:18px;
accent-color:var(--k-magenta);
cursor:pointer;flex-shrink:0;
}
/* ═════════════════════════════════════════════════════════════════════════
16. PROGRESS BAR
Barre de progression magenta sur fond crème.
═════════════════════════════════════════════════════════════════════════ */
.k-progress{
height:6px;
background:var(--k-cream-2);
border:1px solid var(--k-line);
position:relative;overflow:hidden;
}
.k-progress--thin{height:4px}
.k-progress--thick{height:8px}
.k-progress__fill{
height:100%;
background:var(--k-magenta);
transition:width .5s var(--k-ease);
}
.k-progress__fill--yellow{background:var(--k-yellow)}
.k-progress__fill--green {background:var(--k-green)}
.k-progress__fill--cyan {background:var(--k-cyan)}
/* ═════════════════════════════════════════════════════════════════════════
17. HERO PATTERN
Section héro avec pictos flottants et titre énorme.
═════════════════════════════════════════════════════════════════════════ */
.k-hero{
position:relative;
padding:88px 0 96px;
background:var(--k-cream);
overflow:hidden;
border-bottom:1px solid var(--k-line);
}
.k-hero__inner{
position:relative;z-index:5;
max-width:780px;margin:0 auto;
text-align:center;
}
.k-hero__title{
font-size:clamp(48px, 8vw, 96px);
font-weight:900;line-height:.95;
letter-spacing:-.035em;
margin-bottom:24px;
}
.k-hero__title em{
font-style:italic;color:var(--k-magenta);font-weight:900;
}
.k-hero__sub{
font-size:17px;color:var(--k-ink-soft);
max-width:600px;margin:0 auto 32px;line-height:1.65;
}
.k-hero__cta{
display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
/* Pictos flottants en arrière-plan du héro */
.k-hero__floaters{
position:absolute;inset:0;pointer-events:none;z-index:1;
}
.k-hero__floaters img{
position:absolute;
filter:drop-shadow(6px 6px 0 var(--k-ink));
animation:k-floaty 9s ease-in-out infinite;
}
/* ═════════════════════════════════════════════════════════════════════════
18. SECTION DARK
Section sur fond noir avec texte cream.
═════════════════════════════════════════════════════════════════════════ */
.k-dark{
background:var(--k-black);
color:var(--k-cream);
padding:120px 0;
position:relative;overflow:hidden;
}
.k-dark .k-eyebrow{color:var(--k-ink-dark)}
.k-dark__title{
font-size:clamp(40px,6vw,80px);
color:var(--k-cream);
line-height:.98;letter-spacing:-.03em;
margin-bottom:24px;
font-weight:900;
}
.k-dark__title em{font-style:normal;color:var(--k-magenta);font-weight:900}
.k-dark__title .cyan{color:var(--k-cyan);font-weight:900;font-style:normal}
.k-dark__sub{
font-size:17px;color:var(--k-ink-dark);
max-width:600px;line-height:1.6;
}
/* ═════════════════════════════════════════════════════════════════════════
19. TIMELINE (sur fond noir)
Timeline avec années en jaune.
═════════════════════════════════════════════════════════════════════════ */
.k-timeline{display:flex;flex-direction:column;gap:0}
.k-timeline__row{
display:grid;grid-template-columns:120px 1fr;gap:24px;
align-items:center;
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.12);
}
.k-timeline__row:first-child{border-top:1px solid rgba(255,255,255,.12)}
.k-timeline__year{font-size:14px;color:var(--k-yellow);font-weight:700}
.k-timeline__txt{font-size:14.5px;color:var(--k-ink-dark)}
/* ═════════════════════════════════════════════════════════════════════════
20. STATS BAR
Grille de 3 ou 4 cards stats avec valeur grosse.
═════════════════════════════════════════════════════════════════════════ */
.k-stats-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.k-stats-grid--3{grid-template-columns:repeat(3,1fr)}
.k-stat-card{
background:#fff;
border:1.5px solid var(--k-ink);
padding:22px 24px 24px;
position:relative;
transition:transform .25s var(--k-ease),box-shadow .25s var(--k-ease);
}
.k-stat-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--k-ink)}
.k-stat-card__label{
font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
color:var(--k-ink-soft);
margin-bottom:8px;
}
.k-stat-card__value{
font-size:48px;font-weight:900;
letter-spacing:-.025em;line-height:1;color:var(--k-ink);
margin-bottom:4px;font-family:'Inter',sans-serif;
}
.k-stat-card__sub{font-size:13px;color:var(--k-ink-soft)}
/* ═════════════════════════════════════════════════════════════════════════
21. COOKIE BANNER
Banner cookie sticky en bas avec ombre sticker.
═════════════════════════════════════════════════════════════════════════ */
.k-cookie-banner{
position:fixed;
bottom:20px;left:20px;right:20px;
max-width:580px;margin:0 auto;
background:#fff;
border:1.5px solid var(--k-ink);
box-shadow:var(--k-shadow);
padding:18px 22px;
font-size:13.5px;line-height:1.55;
z-index:500;
display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
}
.k-cookie-banner__text{flex:1;color:var(--k-ink-soft);min-width:0}
.k-cookie-banner__text strong{
font-family:'Inter',sans-serif;
font-weight:900;color:var(--k-ink);
letter-spacing:-.005em;
}
.k-cookie-banner__text a{
color:var(--k-magenta);font-weight:600;
text-decoration:underline;text-underline-offset:2px;
}
.k-cookie-banner__actions{display:flex;gap:8px;flex-shrink:0}
.k-cookie-banner__btn{
display:inline-flex;align-items:center;justify-content:center;
padding:10px 20px;
border:0;border-radius:0;
font-family:'Inter',sans-serif;
font-weight:700;font-size:13px;
cursor:pointer;text-decoration:none;
transition:all .25s var(--k-ease);
}
.k-cookie-banner__btn--accept{background:var(--k-yellow);color:var(--k-ink)}
.k-cookie-banner__btn--accept:hover{
transform:translate(-2px,-2px);
box-shadow:var(--k-shadow-sm);
}
.k-cookie-banner__btn--info{
background:transparent;color:var(--k-ink);
box-shadow:inset 0 0 0 1.5px var(--k-ink);
}
.k-cookie-banner__btn--info:hover{background:var(--k-ink);color:var(--k-cream)}
@media (max-width:560px){
.k-cookie-banner{
bottom:12px;left:12px;right:12px;
padding:14px 16px;
flex-direction:column;
align-items:stretch;gap:12px;
box-shadow:var(--k-shadow-sm);
}
.k-cookie-banner__actions{justify-content:center}
.k-cookie-banner__btn{flex:1}
}
/* ═════════════════════════════════════════════════════════════════════════
22. AUTH PATTERN
Page login / register / forgot — card centrée avec sticker en débord.
═════════════════════════════════════════════════════════════════════════ */
.k-auth-page{
min-height:100vh;
display:flex;flex-direction:column;
background:var(--k-cream);
position:relative;overflow:hidden;
}
.k-auth-header{
padding:24px 32px;
display:flex;justify-content:space-between;align-items:center;
z-index:5;position:relative;
}
.k-auth-main{
flex:1;
display:flex;align-items:center;justify-content:center;
padding:32px 28px 64px;
position:relative;z-index:5;
}
.k-auth-card{
background:#fff;
border:1.5px solid var(--k-ink);
padding:48px 48px 40px;
width:100%;max-width:480px;
position:relative;
}
.k-auth-card--lg{max-width:560px}
.k-auth-card__sticker{
position:absolute;
top:-30px;left:-30px;
width:84px;
filter:drop-shadow(6px 6px 0 var(--k-ink));
z-index:2;
}
.k-auth-card__sticker--right{left:auto;right:-30px}
.k-auth__title{
font-size:38px;font-weight:900;
letter-spacing:-.025em;line-height:1;
margin-bottom:12px;
}
.k-auth__sub{
font-size:15px;color:var(--k-ink-soft);line-height:1.55;
margin-bottom:32px;
}
.k-auth__switch{
margin-top:28px;padding-top:24px;
border-top:1px solid var(--k-line);
text-align:center;
font-size:14px;color:var(--k-ink-soft);
}
.k-auth__switch a{color:var(--k-magenta);font-weight:700}
.k-auth__switch a:hover{text-decoration:underline}
@media (max-width:560px){
.k-auth-card{padding:32px 24px}
.k-auth__title{font-size:28px}
.k-auth-card__sticker{display:none}
}
/* ═════════════════════════════════════════════════════════════════════════
23. ERROR PATTERN
Page d'erreur 404/500 — code énorme magenta, pictos flottants.
═════════════════════════════════════════════════════════════════════════ */
.k-error{
min-height:100vh;
background:var(--k-cream);
padding:64px 32px;
display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;
text-align:center;
}
.k-error__inner{position:relative;z-index:5;max-width:560px}
.k-error__code{
font-size:clamp(96px,18vw,200px);
font-weight:900;letter-spacing:-.05em;line-height:.85;
color:var(--k-magenta);
font-family:'Inter',sans-serif;
margin-bottom:14px;
}
.k-error__title{
font-size:clamp(28px,4vw,40px);
font-weight:900;letter-spacing:-.025em;line-height:1;
margin-bottom:14px;
}
.k-error__sub{
font-size:16px;color:var(--k-ink-soft);line-height:1.6;
margin-bottom:32px;
}
.k-error__actions{
display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
/* ═════════════════════════════════════════════════════════════════════════
24. FOOTER PATTERN
Footer multi-colonnes avec brand + columns + CTA.
═════════════════════════════════════════════════════════════════════════ */
.k-footer{
background:var(--k-cream);
padding:64px 0 32px;
border-top:1px solid var(--k-line);
}
.k-footer__top{
display:grid;grid-template-columns:1.4fr repeat(3,1fr) auto;
gap:48px;margin-bottom:48px;
}
.k-footer__brand{
font-size:14px;color:var(--k-ink-soft);
margin-top:18px;line-height:1.6;max-width:320px;
}
.k-footer__col h4{
font-size:11px;letter-spacing:.14em;color:var(--k-ink);
text-transform:uppercase;font-weight:700;margin-bottom:18px;
}
.k-footer__col ul{padding:0;margin:0;list-style:none}
.k-footer__col li{margin-bottom:10px}
.k-footer__col a{font-size:14px;color:var(--k-ink-soft);text-decoration:none}
.k-footer__col a:hover{color:var(--k-magenta)}
.k-footer__bottom{
padding-top:24px;
border-top:1px solid var(--k-line);
display:flex;justify-content:space-between;
font-size:11px;color:var(--k-ink-soft);
letter-spacing:.12em;text-transform:uppercase;
}
@media (max-width:980px){
.k-footer__top{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:560px){
.k-footer__top{grid-template-columns:1fr}
}
/* ═════════════════════════════════════════════════════════════════════════
25. RESPONSIVE BREAKPOINTS GLOBAUX
Ajustements communs aux composants en dessous de 980px / 560px.
═════════════════════════════════════════════════════════════════════════ */
@media (max-width:980px){
.k-inner{padding:0 24px}
.k-nav__inner{padding:16px 24px}
.k-stats-grid{grid-template-columns:repeat(2,1fr)}
.k-stats-grid--3{grid-template-columns:1fr}
.k-nav__center{display:none}
}
@media (max-width:560px){
.k-inner{padding:0 20px}
.k-stats-grid{grid-template-columns:1fr}
.k-pagefoot{padding:20px 20px 32px;font-size:10px;flex-direction:column;align-items:flex-start;gap:6px}
}