/* ==========================================================================
BASE HÉRITÉE DE CLASSIC — À NE PAS SUPPRIMER
--------------------------------------------------------------------------
« use_parent_assets: true » dans config/theme.yml devrait suffire à charger
la feuille du thème parent. Sur cette installation, ce n'est pas le cas :
PrestaShop sert deux fois notre propre theme.css et jamais celle de classic.
Résultat : pas de Bootstrap (les sous-menus, qui reposent sur
.collapse{display:none}, s'affichaient tous dépliés) et pas de police
Material Icons (les icônes sortaient en toutes lettres : « search »,
« shopping_cart »).
On la charge donc explicitement. Les URL relatives qu'elle contient — dont
la police Material Icons — se résolvent bien depuis /themes/classic/assets/.
Cette ligne doit rester AVANT nos propres règles pour que la cascade nous
donne le dernier mot.
========================================================================== */
@import url("/themes/classic/assets/css/theme.css");
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap');
/* ==========================================================================
POK'IN GAMES — thème « Ciel de Boules »
Thème enfant de classic (PrestaShop 8.x)
themes/pokin/assets/css/theme.css
--------------------------------------------------------------------------
1. Design tokens
2. Base et typographie
3. Composants du thème (boutons, cartes, badges, sections…)
4. Raccords PrestaShop (modules classic, listing, tunnel, compte)
========================================================================== */
/* ============================================================
POK'IN GAMES — Thème « Ciel de Boules »
Design tokens — à reporter tels quels dans le thème PrestaShop 8
(themes/pokin/assets/css/_tokens.css)
============================================================ */
:root{
color-scheme: light;
/* — Couleurs « Ciel de Boules » — */
--pk-sky: #DDEDF7; /* fond de page */
--pk-sky-deep: #CFE3F1; /* tuiles média, aplats secondaires */
--pk-surface: #FFFCF6; /* cartes, sections alternées (blanc chaud) */
--pk-ink: #173A4E; /* texte et fonds sombres */
--pk-abricot: #DD6432; /* aplats chauds, badges — jamais en petit texte */
--pk-abricot-deep:#B0491C; /* prix, accents, texte chaud (AA sur ciel) */
--pk-soleil: #F2B134; /* aplats solaires : newsletter, badges */
--pk-lagon: #1E7A66; /* CTA principaux, nav active */
--pk-lagon-deep: #17624F; /* liens et texte lagon (AA sur ciel) */
/* neutres dérivés de l'encre, jamais de gris pur */
--pk-muted: #47677A;
--pk-line: #BFD9E8;
--pk-line-soft: #D6E7F2;
--pk-ink-70: rgba(23,58,78,.80);
--pk-surface-70: rgba(255,252,246,.76);
/* — Typographie — */
--pk-display: "Fredoka", "Segoe UI", system-ui, sans-serif;
--pk-body: "Nunito", "Segoe UI", system-ui, sans-serif;
--pk-t-hero: clamp(2.9rem, 7.4vw, 5.6rem);
--pk-t-h1: clamp(2.3rem, 5.2vw, 3.9rem);
--pk-t-h2: clamp(1.95rem, 3.8vw, 3rem);
--pk-t-h3: clamp(1.25rem, 2vw, 1.55rem);
--pk-t-lead: clamp(1.05rem, 1.35vw, 1.28rem);
--pk-t-body: 1.0625rem;
--pk-t-small: .875rem;
--pk-t-label: .75rem;
/* — Espacements — */
--pk-s1:.25rem; --pk-s2:.5rem; --pk-s3:.75rem; --pk-s4:1rem;
--pk-s5:1.5rem; --pk-s6:2rem; --pk-s7:3rem; --pk-s8:4.5rem;
--pk-s9:7rem;
--pk-gutter: clamp(1.15rem, 4vw, 3rem);
--pk-max: 1240px;
--pk-measure: 62ch;
/* — Rayons — */
--pk-r-pill: 999px;
--pk-r-lg: 20px;
--pk-r-md: 12px;
--pk-r-sm: 6px;
}
/* ============================================================ Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--pk-sky); color:var(--pk-ink);
font-family:var(--pk-body); font-size:var(--pk-t-body); line-height:1.65;
font-synthesis-weight:none;
}
/* height:auto est indispensable dès lors qu'on pose des attributs width/height
sur les ![]()
(ce qu'on fait pour réserver la place et éviter les sauts de
mise en page). Ces attributs agissent comme une hauteur : sans height:auto,
une image en width:100% garde la hauteur de son attribut et s'étire.
Les composants qui imposent volontairement une hauteur — .pk-card__media img,
.ev__thumb — sont plus spécifiques et continuent de l'emporter. */
img{max-width:100%; display:block; height:auto}
h1,h2,h3,h4{font-family:var(--pk-display); font-weight:600; line-height:1.04;
letter-spacing:-.018em; text-wrap:balance; margin:0}
p{margin:0}
a{color:var(--pk-lagon-deep); text-underline-offset:.22em; text-decoration-thickness:1.5px}
button{font:inherit; color:inherit}
/* abricot-deep et non abricot : 4,59:1 sur le ciel, au-dessus du seuil de 3:1
exige par WCAG 1.4.11 pour les elements non textuels. */
:focus-visible{outline:3px solid var(--pk-abricot-deep); outline-offset:3px; border-radius:var(--pk-r-sm)}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}
/* est un simple conteneur : on le retire de la mise en page pour que
les regles ciblant l'img (object-fit, aspect-ratio du parent) continuent de
s'appliquer exactement comme avant l'ajout des sources WebP. */
picture{display:contents}
/* Texte reserve aux lecteurs d'ecran (mentions « nouvelle fenetre »). */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.wrap{max-width:var(--pk-max); margin-inline:auto; padding-inline:var(--pk-gutter)}
.wrap-wide{max-width:1480px; margin-inline:auto; padding-inline:var(--pk-gutter)}
.stack{display:flex; flex-direction:column}
/* eyebrow : deux palets rouge/bleu, clin d'œil aux jetons du jeu */
.eyebrow{font-family:var(--pk-body); font-weight:700; font-size:var(--pk-t-label);
letter-spacing:.16em; text-transform:uppercase; color:var(--pk-muted);
display:flex; align-items:center; gap:.6rem}
.eyebrow::before{content:""; width:26px; height:11px; flex:none; border-radius:999px;
background:
radial-gradient(circle at 5.5px 50%, var(--pk-abricot) 5px, transparent 5.5px),
radial-gradient(circle at 20.5px 50%, var(--pk-lagon) 5px, transparent 5.5px)}
.on-ink .eyebrow{color:var(--pk-soleil)}
.on-ink .eyebrow::before{background:
radial-gradient(circle at 5.5px 50%, #EE7A4A 5px, transparent 5.5px),
radial-gradient(circle at 20.5px 50%, #63C3A9 5px, transparent 5.5px)}
.lead{font-size:var(--pk-t-lead); line-height:1.6; color:var(--pk-ink-70); max-width:var(--pk-measure)}
.muted{color:var(--pk-muted)}
/* ============================================================ Boutons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
font-family:var(--pk-body); font-weight:700; font-size:1rem; letter-spacing:.005em;
padding:.95rem 1.7rem; border-radius:var(--pk-r-pill); border:2px solid transparent;
cursor:pointer; text-decoration:none; transition:background-color .18s, color .18s, border-color .18s, transform .18s}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--pk-lagon); color:var(--pk-surface); border-color:var(--pk-lagon)}
.btn--primary:hover{background:var(--pk-lagon-deep); border-color:var(--pk-lagon-deep)}
.btn--ghost{background:transparent; color:var(--pk-ink); border-color:var(--pk-ink)}
.btn--ghost:hover{background:var(--pk-ink); color:var(--pk-sky)}
.btn--soleil{background:var(--pk-soleil); color:var(--pk-ink); border-color:var(--pk-soleil)}
.btn--soleil:hover{background:#DDB432; border-color:#DDB432}
.btn--onink{background:var(--pk-soleil); color:var(--pk-ink); border-color:var(--pk-soleil)}
.btn--onink-ghost{background:transparent; color:var(--pk-sky); border-color:var(--pk-surface-70)}
.btn--onink-ghost:hover{background:var(--pk-sky); color:var(--pk-ink); border-color:var(--pk-sky)}
.btn--sm{padding:.6rem 1.15rem; font-size:.9rem}
.btn--block{width:100%}
.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none}
/* ============================================================ Header */
/* Conteneurs du gabarit de classic. Il enveloppe la page dans