/* ==========================================================================
Kawi — site vitrine. Design system « Bëschpapier », aligné sur l'app
(source de vérité : app/lib/core/theme/kawi_theme.dart).
Structure : tokens → base → composants → sections → pages spécifiques.
========================================================================== */
/* ---------- Fonts (extraites de l'artifact, auto-hébergées) ---------- */
@font-face{font-family:'Grandstander';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Grandstander-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Grandstander';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Grandstander-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Grandstander';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Grandstander-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Grandstander';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Grandstander-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Grandstander';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/Grandstander-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Grandstander';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/Grandstander-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Nunito-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Nunito-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Nunito-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Nunito-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Nunito-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Nunito-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ---------- Tokens Bëschpapier ---------- */
:root{
/* Le plateau (neutres, depuis KawiCouleurs) */
--papier:#F3ECDD; --carte:#FFFCF6; --bord:#EBE1D0;
--encre:#1a1a2e; --doux:#51517f; /* --doux assombri pour passer WCAG AA (4.5:1) sur papier */
/* La famille Kawi (accents + variantes claires) */
--ecu:#E8743B; --ecu-clair:#FDEEE6; --ecu-fonce:#C95C28; /* dérivé pour hover */
--feuille:#3DA35D; --feuille-clair:#E4F6E9;
--ciel:#3D9BD1; --ciel-clair:#E5F2FA;
--soleil:#F2A93B; --soleil-clair:#FEF3DF;
--prune:#9A6FA6; --prune-clair:#F1E9F3;
--corail:#DB6A8F; --corail-clair:#F9E7EE;
/* Typo */
--display:"Grandstander",system-ui,sans-serif;
--body:"Nunito",system-ui,sans-serif;
/* Formes (KawiFormes : coins très ronds, ombre double douce) */
--r:24px; --r-tuile:18px;
--ombre:0 2px 0 rgba(26,26,46,.06),0 10px 26px -12px rgba(26,26,46,.25);
--ombre-haute:0 30px 60px -25px rgba(26,26,46,.35);
/* Motion (KawiMotion + emil : courbes fortes, jamais d'ease-in) */
--eo:cubic-bezier(.23,1,.32,1);
--maxw:1120px;
}
/* Crossfade natif entre pages (progressive enhancement, MPA) */
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
}
/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
/* Le defilement doux ne s'applique QU'APRES le chargement (classe posee par site.js
sur l'evenement load). Sinon Chrome l'applique aussi au saut vers l'ancre d'arrivee :
en changeant de langue au milieu d'une page, on voyait la page repartir du haut puis
descendre jusqu'a la section. On veut y etre deja, pas y aller. */
html{scroll-behavior:auto}
html.defilement-doux{scroll-behavior:smooth}
/* Header sticky de 66px : sans cette marge, toute cible d'ancre (#prevenu en tete) se
retrouve masquee sous le header apres le saut. */
[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){
html,html.defilement-doux{scroll-behavior:auto}
*{animation:none!important;transition:none!important}
}
body{font-family:var(--body);color:var(--encre);background:var(--papier);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.12}
a{color:inherit;text-decoration:none}
/* height:auto indispensable : sans lui, une image dont le CSS ne fixe que la largeur
garde la hauteur de son attribut HTML et se retrouve ecrasee (cas vu sur la tete de
Kawi de la page histoire, largeur fluide en clamp et hauteur figee a 120px).
Les regles de classe qui fixent une hauteur restent prioritaires par specificite. */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform 160ms var(--eo),background 160ms var(--eo),border-color 160ms var(--eo)}
.btn:focus-visible{outline:3px solid var(--ecu);outline-offset:2px}
.btn:active{transform:scale(.97)} /* feedback d'appui, comme l'échelle .97 de l'app */
/* Cloche de notification sur les CTA "Être prévenu du lancement" : sonne par petites
salves (pivot en haut, comme une vraie cloche secouée), et plus vite au survol.
reduced-motion : cloche fixe (l'icône reste, seul le mouvement disparaît). */
#navcta{white-space:nowrap} /* CTA du header : jamais sur 2 lignes */
.bell{flex:0 0 auto;transform-origin:top center}
/* Pas d'autoplay en boucle (motion gratuit sur un CTA vu en permanence, cf. Emil).
Une seule sonnerie douce à l'arrivée (.is-ringing posée puis retirée par site.js),
puis repos ; re-sonne au survol. Swing amorti pour la fluidité. reduced-motion : fixe. */
@media (prefers-reduced-motion:no-preference){
.bell.is-ringing{animation:ring 1.25s ease-in-out .35s both}
@media (hover:hover) and (pointer:fine){.btn:hover .bell{animation:ring-hover .8s ease-in-out}}
}
@keyframes ring{
0%{transform:rotate(0)}10%{transform:rotate(13deg)}26%{transform:rotate(-10deg)}
42%{transform:rotate(7deg)}58%{transform:rotate(-4.5deg)}74%{transform:rotate(2.5deg)}
88%{transform:rotate(-1deg)}100%{transform:rotate(0)}
}
@keyframes ring-hover{
0%{transform:rotate(0)}18%{transform:rotate(12deg)}44%{transform:rotate(-8deg)}
70%{transform:rotate(4deg)}100%{transform:rotate(0)}
}
.btn-primary{background:var(--ecu-fonce);color:#FFF9EF}
.btn-ghost{background:transparent;color:var(--encre);border-color:#1a1a2e3d}
.btn-ghost.on-dark{color:var(--papier);border-color:#ffffff55}
.btn-dark{background:var(--encre);color:var(--papier)}
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{filter:brightness(.92);transform:translateY(-2px)}
.btn-ghost:hover{border-color:var(--encre);transform:translateY(-2px)}
.btn-ghost.on-dark:hover{border-color:var(--papier)}
.btn-dark:hover{background:#353553;transform:translateY(-2px)}
}
/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:#f3ecdde6;backdrop-filter:blur(8px);border-bottom:1px solid var(--bord)}
/* Grille 3 colonnes : la nav reste centrée quelle que soit la largeur du CTA
(le libellé varie par page : Télécharger / Réserver un pilote / …) */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:66px;gap:16px}
.nav .logo{grid-area:1/1;justify-self:start}
.nav .nav-links{grid-area:1/2}
.nav #navcta{grid-area:1/3;justify-self:end;padding:8px 18px;font-size:14px}
.nav .nav-burger{grid-area:1/3;justify-self:end}
.logo{display:flex;align-items:center;gap:10px;color:var(--encre);font-family:var(--display);font-weight:700;font-size:19px}
.logo img{width:34px;height:34px}
/* Pile d'age (injectee par site.js dans les logos header + footer) */
.age-chip{display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.02em;line-height:1;color:#fff;background:var(--ciel);padding:4px 8px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px -5px rgba(61,155,209,.7)}
footer .age-chip{font-size:10px}
/* Header compact en mode nav mobile (switcher + burger) : la pile passe au footer.
Bascule à 1024px : au-dessous, le nav complet (logo+pile + 5 liens + langsw + CTA)
se serre (chip sur "Parents", "Notre histoire" sur 2 lignes) → burger plus tôt. */
@media (max-width:1024px){header .age-chip{display:none}}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a.link{color:#424267;font-size:15px;font-weight:500;padding:7px 12px;border-radius:999px;transition:background 150ms var(--eo),color 150ms var(--eo)}
.nav-links a.link:hover{color:var(--encre);background:#1a1a2e0d}
.nav-links a.link[aria-current="page"]{color:var(--ecu-fonce);background:var(--ecu-clair);font-weight:600}
@media (max-width:1024px){.nav-links a.link{display:none}}
/* Selecteur de langue. Ecrit en dur dans chaque page par .claude/tools/langsw.mjs,
plus construit en JS : Google ne decouvrait pas /en/ ni /pt/ (cf. le generateur).
Il vit dans .nav-links et reste visible en petit ecran, ou les liens sont masques. */
.langsw{display:inline-flex;align-items:center;gap:2px;margin-left:8px;background:var(--carte);border:1px solid var(--bord);border-radius:999px;padding:2px}
.lsw{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.03em;color:#424267;text-decoration:none;padding:4px 9px;border-radius:999px;transition:background 150ms var(--eo),color 150ms var(--eo)}
@media (hover:hover){.lsw:hover{color:var(--encre);background:#1a1a2e0d}}
.lsw.on{background:var(--ecu-fonce);color:#fff}
.lsw:focus-visible{outline:2px solid var(--ecu);outline-offset:2px}
@media (max-width:1024px){.langsw{margin-left:0;gap:5px}.lsw{padding:9px 12px}}
/* ---------- Hero ---------- */
.hero{padding:60px 0 44px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}
.hero-grid>div:first-child{text-align:center}
.hero-grid .hero-cta,.hero-grid .hero-note{justify-content:center}}
/* Badges de store. Mise en forme reconnaissable (bloc sombre, glyphe, deux lignes),
mais libelle « Bientot sur » : l'app n'est pas publiee, et les badges officiels
« Download on the App Store » sont des marques sous licence dont l'usage suppose une
app reellement disponible. Ils ne pointent donc PAS vers les stores mais vers le
formulaire de capture, seule action possible aujourd'hui. A remplacer par les badges
officiels le jour de la sortie (cf. .claude/rules/contenu-seo.md). */
.stores{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--encre);color:var(--papier);
border-radius:12px;padding:8px 15px 8px 13px;transition:transform 160ms var(--eo),filter 160ms var(--eo)}
@media (hover:hover) and (pointer:fine){.store:hover{filter:brightness(1.25)}}
.store:active{transform:scale(.97)}
.store:focus-visible{outline:3px solid var(--ecu);outline-offset:2px}
.store-ic{width:23px;height:23px;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store small{font-size:10px;letter-spacing:.04em;opacity:.8}
.store b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em}
@media (max-width:900px){.stores{justify-content:center}}
/* Sur fond encre (.cta-band, .guide-cta, .feature), un badge encre serait invisible :
on inverse. Ces blocs sont centres, les badges suivent. */
.cta-band .stores,.guide-cta .stores{justify-content:center;margin:22px 0 0}
.cta-band .store,.guide-cta .store,.feature .store{background:var(--papier);color:var(--encre)}
@media (hover:hover) and (pointer:fine){
.cta-band .store:hover,.guide-cta .store:hover,.feature .store:hover{filter:none;background:#fff}
}
.feature .stores{justify-content:flex-start;margin-top:18px}
.stores--carte{justify-content:center;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--bord)}
/* Le heros de l'accueil porte la carte complete depuis qu'il n'y a plus qu'une seule
forme de bloc. Elle est plus haute que l'ancien formulaire compact et poussait le
bouton 39px sous la ligne de flottaison en 1280x862 : on reprend ces pixels sur les
espaces du heros, pas sur la carte, qui doit rester identique partout. */
@media (min-width:901px){
.hero{padding:44px 0 40px}
.hero .lead{margin-bottom:18px}
.hero .lead-form--slim{margin-top:0}
}
/* Eyebrow : texte + soulignement dessiné à la main (SVG). Pas de pastille bordée
(tell d'IA-slop) : l'univers Bëschpapier est fait main, le trait au feutre colle
mieux. 6 tracés (u2..u6 + défaut) assignés par page via site.js pour éviter le
rendu templated ; sans JS, tout garde le tracé par défaut (dégradation ok). */
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;letter-spacing:.01em;line-height:1.25;color:var(--ecu-fonce);position:relative;background:none;border:0;padding:0 4px 12px;margin-bottom:18px}
.eyebrow img{width:20px;height:20px}
.eyebrow::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:9px;background-repeat:no-repeat;background-position:left bottom;background-size:100% 9px;background-image:url("data:image/svg+xml,")}
.eyebrow.u2::after{background-image:url("data:image/svg+xml,")}
.eyebrow.u3::after{background-image:url("data:image/svg+xml,")}
.eyebrow.u4::after{background-image:url("data:image/svg+xml,")}
.eyebrow.u5::after{background-image:url("data:image/svg+xml,")}
.eyebrow.u6::after{background-image:url("data:image/svg+xml,")}
/* Le trait se "trace" (gauche->droite, comme au feutre) quand l'eyebrow entre dans
le viewport au scroll. Décoratif, scroll-driven : reduced-motion respecté, et sans
support de view() le trait est simplement plein d'emblée (cf. .g3/.g4). */
@media (prefers-reduced-motion:no-preference){
@supports ((animation-timeline:view()) and (animation-range:entry)){
.eyebrow::after{animation:tracer auto linear backwards;animation-timeline:view();animation-range:cover 14% cover 46%}
}
}
@keyframes tracer{from{clip-path:inset(0 100% 0 0)}}
.hero h1{font-size:clamp(32px,4.4vw,42px);margin-bottom:18px;text-wrap:balance}
/* Accueil uniquement : la seconde phrase du titre passe a la ligne. Scope par la
classe .saut, car .hl sert aussi EN MILIEU DE PHRASE sur les autres heros
(« Les premiers mots luxembourgeois de votre enfant ») ou un display:block
casserait le titre. */
.hero h1 .saut{display:block}
.hero h1 .hl{color:var(--ecu-fonce)}
.hero p.lead{font-size:19px;color:var(--doux);max-width:31em;margin-bottom:26px;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.hero-note{font-size:14px;color:var(--doux);display:flex;align-items:center;gap:8px}
/* Fenêtre sur la forêt (accueil) : l'illustration est encadrée comme une fenêtre,
passe-partout papier + coins ronds, pour que le parent regarde dans le monde où
son enfant va entrer. Un seul visuel, aucun décor autour. */
.hero-window{position:relative;background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:10px;box-shadow:var(--ombre-haute);
/* Legere rotation, pour que l'illustration se lise comme une carte posee. Sens
INVERSE de celui du formulaire (-.6deg) : les deux se repondent au lieu de
pencher de concert, ce qui passerait pour un defaut de mise en page.
Redressee sous 900px, ou la colonne est etroite et le debord possible. */
/* Une seule source de verite pour l'inclinaison : l'animation d'entree la relit. */
--tilt:1.2deg;transform:rotate(var(--tilt))}
.hero-window img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
/* Des que le heros passe sur une colonne, l'illustration tombe SOUS le formulaire :
elle n'informe plus, elle allonge la page. On la retire plutot que de la reduire
(decision Steven 2026-07-26). display:none evite aussi son telechargement. */
@media (max-width:900px){.hero-window{display:none}}
/* Entrée du héros : un seul moment orchestré, cascade 70 ms comme l'app */
@media (prefers-reduced-motion:no-preference){
.hero [data-pose]{opacity:0;transform:translateY(10px);animation:pose 480ms var(--eo) forwards}
.hero [data-pose="2"]{animation-delay:70ms}
.hero [data-pose="3"]{animation-delay:140ms}
.hero [data-pose="4"]{animation-delay:210ms}
.hero [data-pose="5"]{animation-delay:280ms}
.hero .hero-window[data-pose]{animation-name:pose-carte}
}
@keyframes pose{to{opacity:1;transform:none}}
/* Sceau « fait au Luxembourg », pose dans un coin de la carte comme un autocollant.
Il ARRIVE en tournant pendant la cascade d'entree, puis se pose et ne bouge plus :
un seul moment orchestre par page, conformement au design system. Pas de fill-mode
forwards, donc l'element retombe sur son inclinaison de repos declaree en CSS. */
/* Selecteur volontairement plus specifique que « .hero-window img », qui cadre
l'illustration en 4:5 et s'appliquerait sinon au sceau (il occupait toute la carte). */
.hero-window .hero-sceau{position:absolute;top:-15px;left:-15px;width:64px;height:64px;z-index:2;
aspect-ratio:auto;object-fit:contain;border-radius:0;
transform:rotate(-9deg);filter:drop-shadow(0 4px 10px rgba(26,26,46,.22))}
@media (prefers-reduced-motion:no-preference){
.hero-window .hero-sceau{animation:sceau 620ms var(--eo) 340ms backwards}
}
@keyframes sceau{from{opacity:0;transform:rotate(-170deg) scale(.65)}}
@keyframes pose-carte{from{opacity:0;transform:translateY(10px) rotate(var(--tilt))}
to{opacity:1;transform:rotate(var(--tilt))}}
/* ---------- Mock téléphone (vraies cartes de l'app) ---------- */
.phone-wrap{display:flex;justify-content:center}
.phone{width:280px;background:var(--encre);border-radius:38px;padding:12px;box-shadow:0 40px 70px -30px rgba(26,26,46,.55)}
.phone-screen{background:var(--papier);border-radius:28px;padding:20px 16px 24px}
.ps-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ps-top img{width:34px;height:34px}
.ps-star{background:var(--soleil-clair);border-radius:999px;padding:5px 12px;font-family:var(--display);font-weight:700;color:#8a5a0e;font-size:14px}
/* Logo Kawi (mascotte à casquette + mot) dans l'en-tête du mock, à la place de la
mascotte seule. .ps-brand img après .ps-top img pour gagner le départage de source. */
.ps-brand{display:inline-flex;align-items:center;gap:5px}
.ps-brand img{width:24px;height:24px}
.ps-brand b{font-family:var(--display);font-weight:800;font-size:15px;line-height:1;color:var(--encre);letter-spacing:-.01em}
.ps-q{text-align:center;font-family:var(--display);font-weight:600;color:var(--encre);margin-bottom:2px}
.ps-listen{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ciel);color:#fff;font-family:var(--display);font-weight:600;padding:10px;border-radius:999px;font-size:14px;margin:10px auto 16px;width:84%;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform 140ms var(--eo),filter 140ms var(--eo)}
.ps-listen .ps-ic{flex:none}
.ps-listen:hover{filter:brightness(1.04)}
.ps-listen:active{transform:scale(.97)}
.ps-listen:focus-visible{outline:3px solid var(--encre);outline-offset:2px}
.ps-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ps-card{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-tuile);padding:10px;box-shadow:var(--ombre);cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit;color:inherit;display:block;width:100%;outline:3px solid transparent;outline-offset:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform 140ms var(--eo),box-shadow 160ms var(--eo),background-color 180ms var(--eo),outline-color 180ms var(--eo)}
.ps-card:active{transform:scale(.97)}
.ps-card:focus-visible{outline-color:var(--encre)}
.ps-card img{display:block;width:100%;border-radius:12px;aspect-ratio:1;object-fit:cover}
.ps-card.correct{outline-color:var(--feuille);background:var(--feuille-clair);animation:ps-pop 260ms var(--eo)}
.ps-card.is-wrong{animation:ps-shake 440ms var(--eo)}
@keyframes ps-pop{0%{transform:scale(.92)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes ps-shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-3px)}}
/* Choix Steven 2026-07-24 : la demo ludique garde ses micro-feedbacks (rebond,
press, shake) meme quand le systeme reduit les animations (ex. « Supprimer les
animations » sur Android). Effets courts (<300ms) et fonctionnels. */
/* Indice « c'est tactile » : anneau qui pulse sur Re-ecouter jusqu'au 1er tap */
.ps-listen{position:relative}
.ps-listen::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(61,155,209,.5);animation:ps-hint 2s var(--eo) infinite;pointer-events:none}
.phone.touched .ps-listen::after{animation:none;box-shadow:none}
@keyframes ps-hint{0%{box-shadow:0 0 0 0 rgba(61,155,209,.5)}70%{box-shadow:0 0 0 12px rgba(61,155,209,0)}100%{box-shadow:0 0 0 0 rgba(61,155,209,0)}}
/* ---------- Panneau de progression ---------- */
.panel{background:#fff;color:var(--encre);border-radius:var(--r);padding:22px;box-shadow:var(--ombre-haute);border:1px solid var(--bord)}
.panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.panel-top .grp{font-family:var(--display);font-weight:700;font-size:16px}
.panel-top .badge{font-size:12px;font-weight:600;color:var(--feuille);background:var(--feuille-clair);padding:4px 10px;border-radius:999px}
.panel-sub{font-size:13px;color:var(--doux);margin-bottom:16px}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bar-label{display:flex;align-items:center;gap:8px;width:120px;font-size:14px;font-weight:500}
.bar-label img{width:22px;height:22px;border-radius:6px}
.bar-track{flex:1;height:10px;background:var(--soleil-clair);border-radius:999px;overflow:hidden}
.bar-fill{display:block;height:100%;width:var(--w,0);border-radius:999px;background:linear-gradient(90deg,var(--feuille),var(--soleil));transition:width 1000ms var(--eo)}
.panel.bars-off .bar-fill{width:0}
@media (prefers-reduced-motion:reduce){.bar-fill{transition:none}}
.bar-val{width:40px;text-align:right;font-size:13px;font-weight:600;color:var(--doux)}
.panel-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--bord);display:flex;justify-content:space-between;align-items:center}
.panel-foot .stat b{font-family:var(--display);font-size:22px}
.panel-foot .stat span{font-size:12px;color:var(--doux);display:block}
/* ---------- Sections ---------- */
section.block{padding:70px 0}
section.tint{background:var(--soleil-clair)}
.section-head{max-width:36em;margin:0 auto 42px;text-align:center}
.section-head .kicker{color:var(--ecu-fonce);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.section-head h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:12px}
.section-head p{font-size:18px;color:var(--doux)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Ligne de sources sous les statistiques : discrète, mais vérifiable. Les chiffres
viennent d'Edustat (SCRIPT) et du MENJE ; ne jamais les modifier sans la source. */
.stat-source{margin-top:14px;text-align:center;font-size:13px;color:var(--doux)}
.stat-source a{color:var(--doux);text-decoration:underline;text-underline-offset:2px}
.stat-source a:hover{color:var(--encre)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.g3{grid-template-columns:1fr}}
/* .g4 = cartes de themes : restent a 2 colonnes meme sur mobile (choix Steven) */
/* Reveal discret au scroll (décoratif : pas de fallback, cf. guide Chrome) */
@media (prefers-reduced-motion:no-preference){
@supports ((animation-timeline:view()) and (animation-range:entry)){
.g3>*,.g4>*{animation:lever auto linear backwards;animation-timeline:view();animation-range:entry 0% entry 60%}
}
}
@keyframes lever{from{opacity:.2;transform:translateY(14px)}}
.card{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:26px;box-shadow:var(--ombre)}
.card .ic{width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--bord);display:grid;place-items:center;margin-bottom:14px;overflow:hidden}
.card .ic img{width:44px;height:44px;object-fit:cover;border-radius:10px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:15px;color:var(--doux)}
.stat-card{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:26px;box-shadow:var(--ombre)}
.stat-card .big{font-family:var(--display);font-weight:700;font-size:42px;color:var(--encre);line-height:1;margin-bottom:8px}
.stat-card .big small{font-size:20px;color:var(--ecu-fonce)}
.stat-card p{font-size:15px;color:var(--doux)}
.step .num{font-family:var(--display);font-weight:700;font-size:15px;color:#fff;background:var(--ecu);width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:15px;color:var(--doux)}
/* ---------- Tuiles de thème : les vraies cartes papier de l'app ---------- */
.theme{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-tuile);padding:14px 14px 16px;text-align:center;box-shadow:var(--ombre)}
.theme img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:10px}
.theme .lb{font-family:var(--display);font-weight:600;font-size:16px;display:block}
.theme .sub{font-size:12.5px;color:var(--doux)}
/* Bloc « Jouer sans écran » : réassurance cartes imprimables */
.se-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media(max-width:820px){.se-grid{grid-template-columns:1fr;gap:26px}.se-txt{text-align:center;display:flex;flex-direction:column;align-items:center}.se-txt .btn{align-self:center}}
.se-txt .btn{margin-top:6px}
.se-note{font-size:13px;color:var(--doux);margin-top:11px}
.se-cards{display:flex;justify-content:center;align-items:flex-start;gap:14px;padding:6px 0}
.se-card{background:var(--carte);border:1.5px dashed #a2a2c4;border-radius:14px;padding:12px 10px 10px;text-align:center;width:118px;box-shadow:var(--ombre)}
.se-card:nth-child(1){transform:rotate(-5deg)}
.se-card:nth-child(2){transform:translateY(-10px)}
.se-card:nth-child(3){transform:rotate(5deg)}
.se-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.se-card span{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ecu-fonce);margin-top:6px}
@media(max-width:820px){.se-card{width:96px}}
/* Lockup Kawi (logo + nom + pile 3-6 ans de travers) en tête du bloc capture email */
.slim-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px}
.slim-brand img{width:40px;height:40px}
.slim-brand b{font-family:var(--display);font-weight:800;font-size:26px;color:var(--encre);letter-spacing:-.01em}
.slim-brand .age-chip{transform:rotate(-6deg)}
/* ---------- La méthode : le sentier de l'écureuil ----------
Même langage que les tuiles de thème (carte papier + illustration de l'app),
accent = couleur réelle du palier dans l'app, reliées par un pointillé. */
.frise{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
/* pointillé du sentier : entre cartes voisines d'une même rangée */
.pal:not(:nth-child(3n))::after{content:"";position:absolute;top:88px;right:-21px;width:24px;border-top:3px dashed var(--bord)}
@media (max-width:1000px){.frise{grid-template-columns:1fr 1fr}.pal::after{display:none!important}}
@media (max-width:560px){.frise{grid-template-columns:1fr}}
.pal{position:relative;z-index:1;background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-tuile);padding:14px 14px 18px;text-align:center;box-shadow:var(--ombre);transition:transform 160ms var(--eo),box-shadow 160ms var(--eo)}
@media (hover:hover) and (pointer:fine){
.pal:hover{transform:translateY(-4px);box-shadow:0 20px 42px -22px rgba(26,26,46,.4)}
}
.pal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:12px;background:#fff}
.pal h3{font-size:17px;margin:9px 0 5px;display:flex;align-items:center;justify-content:center;gap:8px}
.pal h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pc);flex:none}
@media (max-width:1000px){.pal h3{justify-content:flex-start}}
.pal p{font-size:13.5px;color:var(--doux);line-height:1.5}
@media (max-width:1000px){.pal{text-align:left;display:grid;grid-template-columns:76px 1fr;gap:4px 16px;align-items:start;padding:16px}
.pal img{width:76px;height:76px;grid-row:1/4;margin:0;align-self:start}
.pal h3{margin:6px 0 3px}}
.rituel{margin-top:30px;background:var(--encre);color:var(--papier);border-radius:26px;padding:32px}
.rituel-titre{font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:20px}
.rituel-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:860px){.rituel-steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rituel-steps{grid-template-columns:1fr}}
.rituel-steps li{font-size:13.5px;color:#afafcc;display:grid;grid-template-columns:48px 1fr;gap:2px 14px;align-items:start}
.rituel-steps li img{width:48px;height:48px;object-fit:cover;border-radius:12px;grid-row:1/3;background:#ffffff14}
.rituel-steps li b{color:var(--papier);font-family:var(--display);font-weight:600;font-size:15px}
.rituel-steps li span{grid-column:2}
.rituel-note{margin-top:22px;font-size:14px;color:#8686b2;border-top:1px solid #ffffff1f;padding-top:16px}
/* ---------- Bloc co-apprentissage ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--encre);color:var(--papier);border-radius:26px;padding:46px}
@media (max-width:860px){.feature{grid-template-columns:1fr;padding:32px}}
.feature h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px}
.feature p{color:#c5c5da;font-size:17px;margin-bottom:14px}
.feature ul{list-style:none;display:grid;gap:10px}
.feature li{display:flex;gap:10px;font-size:15px;color:#e1e1ec}
.feature li .chk{color:var(--soleil);font-weight:700}
.duo{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.duo .who{background:#ffffff0d;border:1px solid #ffffff1f;border-radius:var(--r-tuile);padding:18px;text-align:center;width:150px}
.duo .who img{width:72px;height:72px;object-fit:cover;border-radius:14px;margin:0 auto 8px}
.duo .who .t{font-family:var(--display);font-weight:600;font-size:15px}
.duo .who .s{font-size:12px;color:#8686b2}
.duo .plus{font-size:26px;color:var(--soleil)}
@media (max-width:520px){.duo{flex-direction:column;gap:10px}.duo .who{width:min(220px,78%)}}
/* ---------- Bandeau sobriété ---------- */
.sob{background:var(--soleil-clair);border-radius:var(--r);padding:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
section.tint .sob{background:var(--carte);border:1px solid var(--bord)}
@media (max-width:780px){.sob{grid-template-columns:1fr}}
.sob .item h3{font-size:16px;margin-bottom:6px;display:flex;align-items:baseline;gap:9px}
.sob .item h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ecu);flex:none;transform:translateY(-1px)}
.sob .item p{font-size:14px;color:var(--doux);padding-left:16px}
/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.qa{border-bottom:1px solid var(--bord)}
.qa summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:var(--display);font-weight:600;font-size:17px}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:3px solid var(--ecu);outline-offset:3px;border-radius:6px}
.qa .plus{color:var(--ecu-fonce);font-size:22px;transition:transform 200ms var(--eo)}
.qa[open] .plus{transform:rotate(45deg)}
.qa .ans{padding:0 0 20px;font-size:15px;color:var(--doux);max-width:62ch}
/* ---------- Bandeau CTA ---------- */
.cta-band{background:var(--encre);color:var(--papier);border-radius:26px;padding:52px 44px;text-align:center}
@media (max-width:620px){.cta-band{padding:38px 22px}}
.cta-band h2{font-size:clamp(26px,4vw,36px);margin-bottom:12px}
.cta-band p{color:#c5c5da;font-size:18px;max-width:34em;margin:0 auto 26px}
.cta-band .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- Cartes de routage (accueil) ---------- */
.route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
@media (max-width:900px){.route-grid{grid-template-columns:1fr 1fr}}
/* Mobile : carrousel horizontal (swipe) plutôt qu'empilement. Le peek de la carte
suivante signale qu'on peut glisser ; scrollbar masquée ; bleed pleine largeur. */
@media (max-width:600px){
.route-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;overflow-y:visible;
scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
margin:0 -24px;padding:6px 24px 16px;scroll-padding-left:24px;scrollbar-width:none}
.route-grid::-webkit-scrollbar{display:none}
.route-grid>.route{flex:0 0 79%;scroll-snap-align:start}
}
.route{display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:24px 22px;text-align:left;box-shadow:var(--ombre);transition:transform 160ms var(--eo),box-shadow 160ms var(--eo)}
.route:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
.route:hover{transform:translateY(-4px);box-shadow:0 20px 42px -22px rgba(26,26,46,.4)}
}
.route img{width:64px;height:64px;object-fit:cover;border-radius:14px;margin-bottom:14px}
.route h3{font-size:19px;margin-bottom:6px}
.route p{font-size:14px;color:var(--doux);margin-bottom:14px}
.route .go{margin-top:auto;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ecu-fonce)}
/* ---------- Bandeau confiance ---------- */
.trust{background:#353553;color:#d4d4e4;padding:18px 0}
.trust-row{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;align-items:center;font-size:14px;font-weight:500}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row .dot{color:var(--soleil)}
/* ---------- Formulaire ---------- */
.lead-form{max-width:560px;margin:0 auto;background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:30px;box-shadow:var(--ombre)}
.lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:560px){.lead-form .row{grid-template-columns:1fr}}
.lead-form label{display:block;font-size:13px;font-weight:600;color:var(--encre);margin-bottom:5px}
.lead-form input,.lead-form textarea{width:100%;border:1.5px solid var(--bord);border-radius:12px;padding:11px 13px;font-family:var(--body);font-size:15px;color:var(--encre);background:#fff}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--ecu)}
.lead-form .full{margin-bottom:14px}
.form-ok{display:none;background:var(--feuille-clair);border:1px solid var(--feuille);border-radius:12px;padding:14px;color:#2c6e43;font-size:15px;margin-top:6px}
.form-ok.show{display:block}
/* Consentement RGPD (checkbox required) */
/* Case de consentement. Trois causes de decalage cumulees sur Safari iOS :
1. WebKit pose sa propre marge sur les cases natives (3px 3px 3px 4px), qui
s'ajoutait au calage absolu et decalait la case par rapport au texte ;
2. le `top:3px` en dur supposait une hauteur de ligne identique partout, ce qui
n'est pas le cas d'un moteur a l'autre ;
3. la taille d'une case native n'est pas pilotable de facon fiable sur iOS.
La case est donc dessinee (appearance:none) : plus aucun style d'agent utilisateur
en jeu, meme rendu partout. Le label reste en flux normal et NON en flex : le lien
« politique de confidentialite » y deviendrait un item separe, hors du texte. */
.consent{display:block;position:relative;padding-left:27px;font-size:13px;color:var(--doux);
line-height:1.5;text-align:left;cursor:pointer;margin-top:4px}
.consent input{appearance:none;-webkit-appearance:none;position:absolute;left:0;
/* (hauteur de ligne 19,5px - case 17px) / 2, pour un alignement optique sur la
premiere ligne quel que soit le rendu de la police. */
/* `padding:0` n'est pas cosmetique : la regle generale des champs (.lead-form input)
applique son padding de 11px a la case aussi, qui mesurait 29x25 au lieu de 17. */
top:1px;margin:0;padding:0;width:17px;height:17px;min-width:0;flex:none;
border:1.5px solid var(--doux);border-radius:5px;background:var(--papier);cursor:pointer;
transition:background 140ms var(--eo),border-color 140ms var(--eo)}
.consent input:checked{background:var(--ecu);border-color:var(--ecu)}
/* La coche est tracee avec deux bords : pas d'image, pas de police d'icones. */
.consent input:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
border:solid var(--papier);border-width:0 2.2px 2.2px 0;transform:rotate(43deg)}
.consent input:focus-visible{outline:3px solid var(--ecu);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.consent input{transition:none}}
.consent a{color:var(--ecu-fonce);text-decoration:underline}
/* Variante slim (capture email seule) */
.lead-form--slim{max-width:520px;text-align:center}
.lead-form--slim .slim-title{font-family:var(--display);font-weight:700;font-size:clamp(19px,3vw,24px);line-height:1.2;margin-bottom:16px;text-wrap:balance}
.lead-form--slim .slim-title span{display:block;margin-top:9px;font-family:var(--body);font-weight:400;font-size:15.5px;line-height:1.45;color:var(--doux)}
.lead-form--slim .consent{max-width:38ch;margin:12px auto 0}
/* La carte definit ses propres couleurs de texte. Elle est posee dans des blocs de fond
different (fond papier sur l'accueil, bande encre sur /parents/), et sur la bande la
regle `.cta-band p{color:#c5c5da}` atteignait son titre : gris clair sur fond creme,
contraste mesure a 1,59:1 la ou WCAG AA en demande 4,5. Une carte qui ne depend pas
de son parent ne peut pas reproduire ce bug ailleurs. */
.lead-form--slim .slim-title{color:var(--encre)}
.lead-form--slim .slim-title span,.lead-form--slim .consent{color:var(--doux)}
.cta-band .lead-form--slim{margin-top:26px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
/* ---------- Footer ---------- */
footer{padding:40px 0;color:var(--doux);font-size:14px;border-top:1px solid var(--bord)}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
/* ---------- Menu mobile ---------- */
.nav-burger{display:none;gap:9px;background:none;border:1.5px solid #1a1a2e3d;border-radius:12px;height:44px;padding:0 13px;cursor:pointer;color:var(--encre);align-items:center;justify-content:center}
.nav-burger .blabel{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#424267}
.nav-burger:hover{border-color:var(--encre)}
.nav-burger:focus-visible{outline:3px solid var(--ecu);outline-offset:2px}
.nav-burger .bars{position:relative;display:block;width:20px;height:14px}
.nav-burger .bars i{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform 250ms var(--eo),opacity 200ms var(--eo)}
.nav-burger .bars i:nth-child(1){top:0}
.nav-burger .bars i:nth-child(2){top:6px}
.nav-burger .bars i:nth-child(3){top:12px}
.nav-burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-scrim{display:none;position:fixed;inset:66px 0 0;z-index:48;background:#1a1a2e26}
.menu-scrim.open{display:block;animation:fondu 200ms var(--eo)}
.mobile-menu{display:none;position:fixed;left:0;right:0;top:66px;z-index:49;background:var(--papier);border-bottom:1px solid var(--bord);box-shadow:0 24px 44px -26px rgba(26,26,46,.5);padding:12px}
.mobile-menu.open{display:block;animation:fondu 220ms var(--eo)}
.mobile-menu .mlink{display:flex;align-items:center;justify-content:space-between;width:100%;border-radius:12px;padding:15px 14px;font-family:var(--display);font-weight:600;font-size:17px;color:var(--encre)}
.mobile-menu .mlink:hover{background:#1a1a2e0d}
.mobile-menu .mlink[aria-current="page"]{background:var(--ecu-clair);color:var(--ecu-fonce)}
.mobile-menu .mlink .chev{color:var(--ecu-fonce);font-size:20px}
.mobile-menu .mcta{margin:10px 6px 6px;width:calc(100% - 12px);justify-content:center}
@media (max-width:1024px){#navcta{display:none}.nav-burger{display:inline-flex}}
@media (min-width:1025px){.mobile-menu,.menu-scrim{display:none!important}}
@keyframes fondu{from{opacity:0;transform:translateY(6px)}}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--encre);color:var(--papier);font-family:var(--display);font-weight:600;font-size:14px;padding:12px 20px;border-radius:999px;box-shadow:var(--ombre-haute);opacity:0;pointer-events:none;transition:opacity 250ms var(--eo),transform 250ms var(--eo);z-index:200}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---------- Page « Notre histoire » ---------- */
.hist{max-width:46rem;margin:0 auto;padding:0 24px}
.hist-hero{text-align:center;padding:64px 0 40px}
.hist-mascotte{width:clamp(88px,16vw,120px);margin:0 auto}
.hist-eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ecu-fonce);font-weight:600;margin:22px 0 0}
.hist-these{font-family:var(--display);font-weight:700;font-size:clamp(28px,6vw,44px);line-height:1.14;text-wrap:balance;margin:14px auto 0;max-width:24ch}
.hist-these .facile{color:var(--ecu)}
.hist-these .dur{white-space:nowrap}
.mot{margin:40px auto 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:2px;font-family:var(--display);font-weight:700;font-size:clamp(30px,8vw,54px);line-height:1}
.syl{position:relative;padding:.15em .05em .55em;color:#424267;opacity:0;transform:translateY(.4em);animation:posesyl 500ms var(--eo) forwards}
.syl small{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-family:var(--body);font-weight:500;font-size:.3em;letter-spacing:.02em;color:var(--doux);white-space:nowrap}
.syl.debut,.syl.debut small{color:var(--ecu)}
.syl:nth-child(1){animation-delay:150ms}.syl:nth-child(2){animation-delay:350ms}
.syl:nth-child(3){animation-delay:900ms}.syl:nth-child(4){animation-delay:1150ms}
@keyframes posesyl{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.syl{animation:none;opacity:1;transform:none}}
.mot-note{text-align:center;font-size:15px;color:var(--doux);margin:16px auto 0;max-width:34ch}
.hist-chap{margin:0 0 8px;padding:38px 0 0;border-top:1px solid var(--bord)}
.hist-chap:first-of-type{border-top:none}
.hist-num{font-family:var(--display);font-size:12px;letter-spacing:.2em;color:var(--ecu-fonce);font-weight:700}
.hist-chap h2{font-size:clamp(22px,4.4vw,30px);line-height:1.18;text-wrap:balance;margin:8px 0 14px}
.hist-chap p{font-size:17px;color:var(--encre);margin:0 0 16px;line-height:1.7}
.hist-chap p.lead{font-size:19px}
.hist-chap strong{color:var(--ecu-fonce);font-weight:600}
.hist-chap em{color:var(--prune);font-style:italic}
.hist-chiffre{display:flex;align-items:center;gap:14px;background:var(--soleil-clair);border-radius:16px;padding:18px 20px;margin:20px 0}
.hist-chiffre img{width:56px;height:56px;object-fit:cover;border-radius:12px;flex:none}
.hist-chiffre span{font-size:15px;color:var(--doux)}
.hist-quote{margin:22px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(21px,4.6vw,27px);line-height:1.3;text-wrap:balance;color:var(--encre)}
.hist-quote .facile{color:var(--ecu)}
.hist-foot{text-align:center;padding:48px 0 72px}
.hist-foot img{width:64px;margin:0 auto}
.hist-foot .btn{margin-top:18px}
.hist-sign{margin-top:22px;font-family:var(--display);font-size:12px;letter-spacing:.1em;color:var(--doux)}
/* ==========================================================================
Guides (cocon sémantique) : gabarit article + cartes-mots sonores
========================================================================== */
.guide{max-width:720px;margin:0 auto;padding:56px 24px 24px}
.guide-kicker{color:var(--ecu-fonce);font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.guide h1{font-size:clamp(30px,4.6vw,42px);margin-bottom:16px;text-wrap:balance}
.guide .lead{font-size:19px;color:var(--doux);margin-bottom:8px}
.guide h2{font-size:clamp(22px,3vw,28px);margin:44px 0 12px}
.guide p{margin:0 0 16px;line-height:1.7}
.guide ul,.guide ol{margin:0 0 16px;padding-left:22px;line-height:1.7}
.guide li{margin-bottom:6px}
.guide p a,.guide li a{color:var(--ecu-fonce);text-decoration:underline;text-decoration-color:#e8743b66;text-underline-offset:3px}
.guide p a:hover,.guide li a:hover{text-decoration-color:var(--ecu-fonce)}
.guide .encart{background:var(--soleil-clair);border-radius:16px;padding:18px 20px;margin:22px 0;font-size:15px}
.guide .encart b{font-family:var(--display)}
/* Les tableaux comparatifs depassent 390px : sans conteneur, c'est la PAGE qui scrollait
lateralement (mesure du 2026-07-30 : 467px de contenu pour 390px d'ecran sur /guides/spillschoul/).
La regle du projet veut l'inverse : le contenu large scrolle chez lui, jamais le body. */
.guide .tableau{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch}
.guide .tableau table{margin:0}
.guide table{border-collapse:collapse;width:100%;margin:18px 0;background:var(--carte);border:1px solid var(--bord);border-radius:14px;overflow:hidden;font-size:15px}
.guide th,.guide td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--bord)}
.guide th{font-family:var(--display);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--doux)}
.guide tr:last-child td{border-bottom:none}
.guide-cta{background:var(--encre);color:var(--papier);border-radius:22px;padding:30px;text-align:center;margin:44px 0 24px}
.guide-cta::before{content:"";display:block;width:92px;height:92px;margin:0 auto 14px;background:url(/assets/img/kawi-mascotte.webp) center/contain no-repeat}
.guide-cta p{color:#c5c5da;margin:0 0 18px}
.guide-cta h2{margin:0 0 8px;font-size:clamp(21px,3vw,26px)}
/* Cartes-mots : le geste de l'app (toucher = entendre), reproduit sur le web */
.mots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 8px}
@media (max-width:560px){.mots-grid{grid-template-columns:1fr 1fr}}
.mot-card{position:relative;background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-tuile);padding:12px 12px 14px;text-align:center;cursor:pointer;font:inherit;color:inherit;box-shadow:var(--ombre);transition:transform 160ms var(--eo),outline-color 160ms var(--eo);outline:3px solid transparent}
.mot-card:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.mot-card:hover{transform:translateY(-3px)}}
.mot-card:focus-visible{outline:3px solid var(--ecu)}
.mot-card.joue{outline-color:var(--ciel);background:var(--ciel-clair)}
.mot-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:10px}
.mot-card .lb{display:block;font-family:var(--display);font-weight:700;font-size:17px}
.mot-card .tr{display:block;font-size:12.5px;color:var(--doux)}
.mot-card .hp{position:absolute;top:18px;right:18px;width:28px;height:28px;border-radius:50%;background:var(--ciel);color:#fff;display:grid;place-items:center}
.mot-card .hp svg{width:14px;height:14px}
@media (prefers-reduced-motion:no-preference){
.mot-card.joue .hp{animation:pulse-hp 900ms var(--eo) infinite}
}
@keyframes pulse-hp{50%{transform:scale(1.15)}}
/* Les coulisses (accueil) : l'histoire du fondateur à gauche, les faits vérifiables à
droite. Pas de témoignage ni de compteur d'utilisateurs : l'app n'est pas sortie, il
n'y en a pas, et en inventer serait un faux avis. */
.coulisses{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:38px}
.coulisses .kicker{color:var(--ecu-fonce);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.coulisses h2{font-size:clamp(24px,3vw,30px);margin:10px 0 16px}
.coulisses p{color:var(--doux);font-size:17px;line-height:1.6;margin-bottom:14px}
.coul-nom{margin-bottom:14px}
.coul-nom b{color:var(--ecu-fonce);font-weight:700}
.coul-sign{font-family:var(--display);font-weight:700;font-size:14px;color:var(--encre);margin-bottom:20px}
.coul-faits{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.coul-faits li{background:var(--papier);border:1px solid var(--bord);border-radius:var(--r-tuile);padding:16px 18px;font-size:15px;color:var(--doux);line-height:1.5}
.coul-faits b{color:var(--encre)}
@media (max-width:900px){.coulisses{grid-template-columns:1fr;gap:26px;padding:26px}}
/* Footer en colonnes : le cocon (guides, blog) était écrit mais jamais maillé depuis
l'accueil. Les titres sont des div, pas des h2 : ils n'ont rien à faire dans le plan
du document. */
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px 24px;padding-bottom:32px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-h{font-family:var(--display);font-weight:700;font-size:14px;color:var(--encre);margin-bottom:2px}
.foot-col a{color:var(--doux);font-size:14px;line-height:1.35;text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start;transition:color 150ms var(--eo)}
.foot-col a:hover{color:var(--encre);border-color:var(--bord)}
/* Cocarde Luxembourg (footer) */
.foot-lu{display:flex;align-items:center;gap:8px}
.foot-lu img{width:22px;height:22px}
.foot-legal{margin-top:18px;padding-top:16px;border-top:1px solid var(--bord);font-size:13px;color:var(--doux)}
.foot-legal a{color:var(--doux);border-bottom:1px solid transparent;transition:color 150ms var(--eo),border-color 150ms var(--eo)}
.foot-legal a:hover{color:var(--encre);border-color:var(--bord)}
/* Compteur de noisettes du mock (remplace l'étoile, comme dans l'app) */
.ps-star{display:inline-flex;align-items:center;gap:5px}
.ps-star img{width:16px;height:16px}
/* Utilitaires generaux : honeypot des formulaires (anti-spam), accessibilite */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}
/* Heros en petit ecran : le titre en 32px produisait cinq lignes centrees et un mot seul
en bas. Un cran plus bas, avec des lignes equilibrees, le bloc se lit d'un coup d'oeil. */
@media (max-width:480px){
.hero h1{font-size:29px;line-height:1.14}
.hero p.lead{font-size:17.5px;margin-bottom:22px}
.lead-form--slim .slim-title{font-size:19px}
.lead-form--slim .slim-title span{font-size:15px}
}
/* ---------- Modale « Être prévenu » ----------