@charset "utf-8";
/* ─────────────────────────────────────────────────────────────────────────
pika — langage visuel « crayonné » (page de présentation et écrans produit)
─────────────────────────────────────────────────────────────────────────
Contrat de formes DICTÉ PAR SIMON, pas déduit de mes réflexes :
· bordures → trait tremblé, main levée (SVG, jamais border-radius)
· profondeur→ À PLAT. Aucune box-shadow, nulle part.
· géométrie → légère rotation aléatoire des blocs (0,3° à 1°)
· fond → papier crème uni, grain léger
Ancre : design-system Open Design « doodle ». Deux écarts assumés :
1. Sa police (Comic Sans dans les tokens, Delius Swash Caps dans son
DESIGN.md — le paquet se contredit) est écartée : Delius n'a PAS le
latin étendu, donc pas de č/š/ž. Sur un site slovène d'abord, les
titres casseraient en plein mot. → Caveat, auto-hébergée, latin-ext.
2. Son accent bleu #49B6E5 est remplacé par le rose de pika : les pages
de vote gardent leur identité rose, un bleu ici couperait le produit
en deux à chaque clic. On prend les FORMES de doodle, pas sa palette.
⚠️ Ne pas « assainir » ce fichier en y remettant des border-radius uniformes
ou des ombres portées : c'est exactement ce qu'il existe pour empêcher.
───────────────────────────────────────────────────────────────────────── */
/* La police Caveat est déclarée dans fonts.css, partagé avec style.css.
Toute page qui charge sketch.css DOIT aussi charger fonts.css. */
:root {
--paper: #fbf7f2; /* crème, jamais blanc pur */
--ink: #2e2a28; /* encre chaude, jamais noir pur */
--pencil: #6b625d; /* gris crayon : texte secondaire */
--accent: #e07a92; /* rose pika — continuité avec les pages de vote */
--accent-d:#b84e6a;
--line: #3a3330; /* couleur du trait dessiné */
}
* { box-sizing: border-box; }
/* ⚠️ `100vw` COMPTE LA BARRE DE DEFILEMENT, `100cqw` non. Les blocs pleine largeur de
cette feuille (`.hero-sk`, le trait de `.topbar::after`, le calage du texte du heros)
sont construits en `50% - 50vw` : sur un navigateur de bureau, dont la barre est
classique et non en surimpression, ils depassaient de la moitie de sa largeur DE CHAQUE
COTE (mesure a 390px : heros [-7,5 ; 382,5] pour une largeur utile de 375). D'ou un
defilement horizontal et un heros decale du reste de la page.
`body` est donc declare CONTENEUR : `100cqw` vaut sa largeur de contenu, barre exclue.
Mesure apres correction : heros [0 ; 375], defilement horizontal 0.
- ⚠️ Ni `overflow-x: hidden` ni `overflow-x: clip` sur `html` n'y changent quoi que ce
soit (les deux mesures, 8px de defilement residuel dans les trois cas). Ne pas y
revenir en croyant a un oubli.
- Le confinement de `body` ne casse PAS la visionneuse : verifie sur `/why`, elle
couvre toujours l'ecran (top 0, hauteur = viewport) une fois `body` conteneur.
- Chaque regle garde sa version `vw` AVANT sa version `cqw` : sur un navigateur sans
requetes de conteneur, la seconde est ignoree et l'ancien rendu subsiste.
- ⚠️ INVISIBLE EN CAPTURE HEADLESS : la barre y est en surimpression, largeur 0. Ce
defaut ne se reproduit qu'avec `scrollbar-gutter: stable` (ou un vrai navigateur de
bureau). Une capture Playwright propre ne prouve rien ici. */
body { container-type: inline-size; }
body {
margin: 0;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: var(--ink);
line-height: 1.6;
background-color: var(--paper);
/* Grain : deux trames de points décalées, très pâles. Pas d'image à charger. */
background-image:
radial-gradient(circle at 1px 1px, rgba(58,51,48,.055) 1px, transparent 0),
radial-gradient(circle at 1px 1px, rgba(58,51,48,.035) 1px, transparent 0);
background-size: 13px 13px, 29px 29px;
background-position: 0 0, 7px 11px;
}
/* ── Typographie ────────────────────────────────────────────────────────── */
/* Caveat en TITRAGE seulement : une manuscrite en corps de texte se paie en
lisibilité, surtout sur les diacritiques slovènes et pour des lecteurs âgés. */
.hand { font-family: 'Caveat', 'Segoe UI', cursive; font-weight: 700; }
h1, h2, h3 { font-family: 'Caveat', 'Segoe UI', cursive; font-weight: 700; line-height: 1.15; margin: 0 0 .35em; }
h1 { font-size: clamp(2.6rem, 9vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
h3 { font-size: 1.5rem; }
.lede { font-size: 1.12rem; color: var(--pencil); max-width: 46ch; }
.small { font-size: .88rem; color: var(--pencil); }
/* ── Le trait tremblé ───────────────────────────────────────────────────────
Un vrai contour irrégulier, en SVG inline (data URI) étiré sur la boîte.
`border-image` porte le tracé : aucune règle border-radius n'intervient,
donc aucun risque de retomber sur le bloc arrondi générique.
Le filtre feTurbulence ondule le trait — c'est lui qui fait la main levée. */
.sketch {
border: 3px solid transparent;
border-image: url("data:image/svg+xml;utf8,\
") 14 / 14px / 0 round;
background: #fffdfa;
padding: 22px 24px;
}
/* Variantes de graine : deux blocs voisins ne doivent pas avoir le MÊME tremblé,
sinon l'irrégularité devient un motif — et trahit la génération. */
.sketch.s2 {
border-image: url("data:image/svg+xml;utf8,\
") 14 / 14px / 0 round;
}
.sketch.s3 {
border-image: url("data:image/svg+xml;utf8,\
") 14 / 14px / 0 round;
}
/* ── Rotation légère ────────────────────────────────────────────────────────
0,3° à 1°, alternée. Redressée au survol/focus pour ne pas gêner la lecture
d'un champ, et annulée si l'utilisateur demande moins d'animations. */
.tilt-a { transform: rotate(-0.7deg); }
.tilt-b { transform: rotate( 0.5deg); }
.tilt-c { transform: rotate(-0.35deg); }
.tilt-d { transform: rotate( 0.9deg); }
.sketch { transition: transform .18s ease; }
.sketch:focus-within { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
.tilt-a, .tilt-b, .tilt-c, .tilt-d { transform: none; }
.sketch { transition: none; }
}
/* ── Mise en page ───────────────────────────────────────────────────────── */
.sheet { max-width: 760px; margin: 0 auto; padding: 28px 20px 72px; }
.topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 0; padding-bottom: 22px; position: relative; }
.topbar::after { content: ''; position: absolute; left: calc(50% - 50vw); bottom: 0; width: 100vw; border-bottom: 1px solid var(--ink);
left: calc(50% - 50cqw); width: 100cqw; }
.brand { font-family: 'Caveat', cursive; font-weight: 700; font-size: 2rem; color: var(--ink); text-decoration: none; }
/* L'icone patte-coeur, devant le mot. Dimensionnee en `em` : elle suit la taille du
wordmark, y compris la reduction sous 480px — une hauteur en pixels s'en detacherait.
⚠️ `.brand` reste EN LIGNE, pas `inline-flex` : la barre du haut aligne ses elements
sur la LIGNE DE BASE, et un conteneur flex prend pour ligne de base celle de son
premier element — l'image — ce qui decale le mot par rapport aux liens de nav. D'ou
un simple `vertical-align` negatif, qui pose l'icone sur la ligne de base du mot. */
/* 1,40em : l'icone depasse le mot en haut ET en bas, comme sur le logo de reference —
elle est son egale, pas un accessoire pose devant. Choisi en comparant quatre tailles
rendues cote a cote (1,15 / 1,30 / 1,40 / 1,55) : en dessous elle fait vignette, au
dessus elle ecrase le mot. Le calage negatif suit la hauteur, les deux vont ensemble. */
.brand-icon { height: 1.4em; width: auto; vertical-align: -.42em; margin-right: .22em; }
.topbar nav { display: flex; gap: 16px; align-items: baseline; }
.topbar nav a { color: var(--pencil); text-decoration: none; font-size: .92rem; border-bottom: 1.5px solid transparent; }
.topbar nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
/* Héros : un seul par page. Le titre porte, rien d'autre ne doit concurrencer.
⚠️ `.hero-sk` est l'en-tête de HUIT gabarits (accueil, palmarès, pourquoi, connexion,
création x2, réglages, page introuvable) et un SEUL porte le bandeau. Il reste donc un
bloc ordinaire, dans la colonne : la pleine largeur est posée plus bas sur
`.hero-content`, qui n'existe que là où il y a une image à étendre. Les deux ont été
confondus un temps — les sept autres écrans ont alors sorti leur titre et leur chapô
à x=0, contre x=340 pour tout le reste de la page, sans aucun retrait pour les
rattraper (`.hero-content` porte le retrait, `.hero-sk` n'en a jamais eu). */
.hero-sk { margin: 0 0 52px; }
.hero-sk h1 { margin-bottom: .25em; }
.hero-sk .lede { font-size: 1.22rem; }
.hero-content {
/* La pleine largeur vit ICI, pas sur `.hero-sk` : c'est le bandeau qui s'etend, et
`.hero-content` n'existe que sur l'accueil. Meme unite `cqw` que partout ailleurs,
avec son repli `vw` — voir la note en tete de feuille. */
width: 100vw; margin-left: calc(50% - 50vw);
width: 100cqw; margin-left: calc(50% - 50cqw);
/* 30.125 = 482/1600, le ratio du bandeau : la boite part a sa hauteur naturelle.
En `vw` elle depassait l'image de quelques pixels (barre de defilement comptee),
ce qui laissait un liseré de papier sous elle. */
min-height: min(482px, 30.125vw);
min-height: min(482px, 30.125cqw);
/* Cale le texte du heros sur la colonne de `.sheet` : meme unite que la largeur du
bloc, sinon le calage se decale de la moitie de la barre de defilement. */
padding: 38px max(20px, calc((100vw - 760px) / 2 + 20px));
padding: 38px max(20px, calc((100cqw - 760px) / 2 + 20px));
background-image: var(--hero-image);
/* ⚠️ `100% auto`, JAMAIS `100% 100%` : la hauteur de ce bloc est un MINIMUM, et
l'accroche la depasse des que la fenetre se resserre (ou dans une langue plus
verbeuse). En `100% 100%` l'image (1600x482) suivait la boite et se contractait
horizontalement. Largeur imposee + hauteur libre = proportions conservees, sans
recadrage. Ancree en HAUT (`50% 0`) : le debord se fait donc vers le bas, la ou
le voile du texte le couvre. */
background-position: 50% 0;
background-repeat: no-repeat; background-size: 100% auto;
}
.hero-copy { width: min(590px, 100%); padding: 18px 24px 22px; background: rgba(255, 252, 248, .88); }
.hero-copy > :first-child { margin-top: 0; }
.hero-copy > :last-child { margin-bottom: 0; }
/* Bloc qui doit rester RATTACHÉ à l'accroche, et non flotter au milieu de la page.
⚠️ Marge NÉGATIVE, et c'est le seul levier : les marges verticales adjacentes
fusionnent (max des positives + somme des négatives), donc le `margin-top` positif
d'un
qui suit le hero est purement et simplement avalé par les 52 px de celui-ci.
On rabote la marge du hero, on n'en ajoute pas une. */
.after-lede { margin-top: -30px; margin-bottom: 30px; }
/* ── Écran large : le bloc « page d'exemple » occupe la place du bandeau ──────
Le bandeau y était décoratif — il montrait des conversations, il ne menait nulle part.
À sa place, le seul bloc de la page qui donne à VOIR le produit : une vraie page de vote.
L'accroche garde sa colonne à gauche, le bloc prend la droite.
⚠️ C'est une PLACE DE GRILLE, pas un déplacement du balisage : le bloc reste écrit une
seule fois, à sa place de téléphone (en bas), et `grid-row`/`grid-column` le remontent
ici. Ne jamais « simplifier » en dupliquant le bloc pour en masquer un des deux par
requête média : deux versions à corriger, et un lien fantôme pour les lecteurs d'écran.
⚠️ Le héros perd sa pleine largeur ICI SEULEMENT (`.hero-content`, jamais `.hero-sk` —
sept autres gabarits partagent cette classe). Sans bandeau il n'y a plus rien à étendre,
et le voile de papier disparaît avec lui : sur du papier crème, un rectangle crème ne
fait que décaler le titre.
⚠️ Les marges NE FUSIONNENT PLUS entre éléments de grille. Vérifié que les écarts ne
bougent pas : `.after-lede` (-30px) et le chapô sous les trois temps (-22px) rabotent une
marge de bloc adjacente, dont ils font la somme dans les deux modes (52-30, 52-22).
⚠️⚠️ TOUT EST PORTÉ PAR `.sheet:has(.lp-example)`, jamais par `.sheet` ni `.hero-sk` nus.
`.sheet` est le socle des HUIT gabarits et `.hero-sk` leur en-tête commun : une première
version qui mettait `.hero-sk` en colonne 1 a rétréci l'en-tête de `why`, `login`,
`names`, `new` et « page introuvable » à 444px, colonne de droite vide à côté — +184px de
hauteur sur `/why`, +129px sur la page introuvable. Mesuré en comparant les six gabarits
avant/après, pas vu à l'œil : chaque page rendait « correctement », simplement plus
étroite. C'est le même piège que la pleine largeur du bandeau, sous une autre forme.
`:has()` est le bon outil ici : la mise en page suit la PRÉSENCE du bloc, et un navigateur
qui ne le connaît pas retombe sur la colonne unique — soit exactement l'état d'avant. */
@media (min-width: 561px) {
.sheet:has(.lp-example) {
/* La colonne de gauche ne descend pas sous ~450px : c'est ce qu'il faut aux DEUX
boutons du héros pour rester côte à côte (mesuré à 432px de contenu). En dessous ils
s'empilent, et l'accroche perd la compacité qu'on vient de lui gagner. */
display: grid; grid-template-columns: minmax(0, 1fr) minmax(228px, .45fr);
column-gap: 22px; align-items: start;
}
/* Tout occupe les deux colonnes ; seules l'accroche et le bloc d'exemple se partagent
la ligne 2. Déclaré AVANT les deux exceptions : le dernier gagne à spécificité égale. */
.sheet:has(.lp-example) > * { grid-column: 1 / -1; }
.sheet:has(.lp-example) .hero-sk { grid-column: 1; grid-row: 2; }
/* ⚠️ CE SÉLECTEUR DOIT PORTER LE `:has()` LUI AUSSI, pas seulement le conteneur.
`.sheet:has(.lp-example) > *` pèse (0,2,0) — `:has()` prend la spécificité de son
argument — contre (0,1,0) pour un `.lp-example` nu : la règle générique gagnait, le
bloc restait sur les deux colonnes ET sur la ligne du héros, qu'il RECOUVRAIT. Le titre
disparaissait derrière lui. Vu seulement en regardant la capture : le comparateur de
positions disait « des blocs ont bougé », ce qui était vrai — dans la mauvaise case.
Padding resserré : dans 760px de colonne partagée, les 24px des blocs `sketch` se
paient sur le seul élément qui ne peut pas se replier, le bouton. */
.sheet:has(.lp-example) .lp-example {
grid-column: 2; grid-row: 2; margin: 0; padding: 18px 18px 20px;
}
/* Bouton resserré dans cette place, et seulement là : à 208px de contenu, « Open the
example » / « Példa megnyitása » se cassaient en deux. Il est SECONDAIRE — le bouton
qui doit rester gros est « Créer ma page », à gauche. Mesuré dans les huit langues. */
.sheet:has(.lp-example) .lp-example .btn { padding: 9px 15px; font-size: .88rem; }
/* ── Le bandeau, DERRIÈRE les deux blocs ──────────────────────────────────
Il ne peut plus être le fond de `.hero-content` : celui-ci n'occupe que la colonne de
gauche, l'image s'arrêterait au milieu de la page. C'est donc un ÉLÉMENT DE GRILLE à
part entière — le `::before` du conteneur — posé sur la ligne du héros et sur les deux
colonnes, avec le débord pleine largeur habituel (`100cqw` + son repli `vw`). Le calcul
tient parce qu'il s'étale sur toute la sheet : `50%` y vaut la moitié de la colonne de
texte, comme pour `.topbar::after`. Sur un seul des deux blocs, il serait faux.
⚠️ `align-self: stretch` : la grille est en `align-items: start`, sans quoi le fond
ferait la hauteur d'une boîte vide (zéro).
⚠️ `100% auto` + `min-height` au ratio de l'image (30.125cqw = 482/1600), EXACTEMENT
comme la version pleine largeur — et surtout pas `cover`. Essayé : la ligne étant dictée
par le texte (~300px), `cover` agrandit l'image jusqu'à 525px de haut pour la remplir et
recadre de 250px de chaque côté. Le bandeau devient un gros plan illisible. Le
`min-height` règle le problème par l'autre bout : c'est la LIGNE qui prend la hauteur de
l'image, donc rien à recadrer et pas de bande de papier vide en dessous.
Ancré en haut : le débord se fait vers le bas, comme avant.
⚠️ Les deux blocs REPRENNENT un contexte d'empilement au-dessus (`z-index: 1`) : les
blocs `sketch` sont inclinés par `transform`, donc chacun ouvre le sien, et sans ordre
explicite le fond passait devant l'un ou l'autre selon la page. */
.sheet:has(.lp-example)::before {
content: ''; grid-column: 1 / -1; grid-row: 2; align-self: stretch; z-index: 0;
margin-left: calc(50% - 50vw); width: 100vw; min-height: min(482px, 30.125vw);
margin-left: calc(50% - 50cqw); width: 100cqw; min-height: min(482px, 30.125cqw);
/* ⚠️ Un FONDU vers le papier par-dessus l'image, et il n'est pas décoratif : la bande
prend la hauteur du texte, l'image celle de son ratio (30,125 % de la largeur). Dès
que la première dépasse la seconde — ce qui arrive sous ~1000px, ou dans une langue
plus verbeuse — l'image s'arrêtait NET au milieu de la bande, un trait horizontal en
travers de la page. Le fondu rend cette limite au papier au lieu de la trancher, et
il ne se voit pas quand l'image couvre toute la bande. */
background:
linear-gradient(180deg, rgba(250, 247, 242, 0) 55%, var(--paper) 92%),
var(--hero-image) 50% 0 / 100% auto no-repeat;
}
.sheet:has(.lp-example) .hero-sk,
.sheet:has(.lp-example) .lp-example { position: relative; z-index: 1; }
/* Le voile de papier RESTE, lui : c'est ce qui garde le titre lisible sur la photo.
Seule la pleine largeur quitte `.hero-content` — elle est passée au fond ci-dessus. */
.hero-content {
width: auto; margin-left: 0; min-height: 0; padding: 26px 0; background-image: none;
}
.hero-copy { width: 100%; padding: 14px 16px 16px; background: rgba(255, 252, 248, .88); }
/* Le bloc d'exemple s'aligne sur le voile, pas sur le bord de la bande : les deux doivent
partir de la même ligne, sinon la colonne de droite a l'air de flotter. */
.sheet:has(.lp-example) .lp-example { margin-top: 26px; }
}
/* Souligné tracé à la main sous un mot-clé du titre */
.underline {
position: relative; white-space: nowrap; color: var(--accent-d);
}
.underline::after {
content: ''; position: absolute; left: -2%; right: -2%; bottom: -.07em; height: .28em;
background: url("data:image/svg+xml;utf8,\
") no-repeat center/100% 100%;
}
/* Étapes : numérotées à la main, en colonne. Volontairement PAS une grille de
cartes auto-fit — c'est le réflexe que ce fichier existe pour éviter. */
.steps { display: flex; flex-direction: column; gap: 26px; margin: 0 0 52px; padding: 0; list-style: none; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-n {
flex: none; width: 52px; height: 52px; display: grid; place-items: center;
font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.9rem; color: var(--accent-d);
background: url("data:image/svg+xml;utf8,\
")
no-repeat center/contain;
}
.step h3 { margin-bottom: .1em; }
.step p { margin: 0; color: var(--pencil); }
/* Boutons : remplis, coins à peine cassés, sans la moindre ombre. */
/* Boutons : forme tracee a la main (SVG de fond), pas un rectangle arrondi.
C'etait l'element le plus generique de la page — donc celui qui trahissait le plus. */
.btn {
display: inline-block; font: inherit; font-weight: 700; cursor: pointer;
padding: 14px 28px; border: none; color: #fff; text-decoration: none; background: none;
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat; background-size: 100% 100%;
}
.btn:hover {
background-image: url("data:image/svg+xml;utf8,\
");
}
.btn-ghost {
color: var(--accent-d);
background-image: url("data:image/svg+xml;utf8,\
");
}
.btn-ghost:hover {
background-image: url("data:image/svg+xml;utf8,\
");
}
.btn-lg { font-size: 1.08rem; padding: 15px 32px; }
/* Liens dans le corps du texte. Sans cette règle ils restent au bleu souligné par
défaut du navigateur — ce qui saute aux yeux au milieu d'une page tracée à la main.
Ciblé sur `p`/`li` pour ne pas écraser la barre de navigation ni les boutons. */
/* ⚠️ `:not(.btn)` est INDISPENSABLE : les boutons sont des souvent
posés dans un