/* Mise en page : la marque d'abord (un nid de tuiles, une couleur par moment de vie), puis la boutique rangée par rythme de vie. Fond crème fixe, choix d'un seul thème. */
:root{
  --creme:#FFF7EC; --carte:#FFFFFF; --encre:#2E2A33; --gris:#6E6676; --trait:#E8DCCA; --brindille:#D9C3A3;
  --corail:#E0603F; --corail-fonce:#C24E30; --corail-clair:#FDE3DB;
  --rdv:#EE7B5F; --famille:#F5C24C; --ecole:#7DB3E0; --sorties:#86B98F;
  --f-titre:"Fredoka","Nunito",system-ui,sans-serif;
  --f-texte:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--creme);color:var(--encre);font-family:var(--f-texte);font-size:17px;line-height:1.6}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titre);font-weight:600;line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--corail)}
:focus-visible{outline:3px solid var(--corail);outline-offset:3px;border-radius:6px}

.tuile{display:inline-grid;place-items:center;aspect-ratio:1;border-radius:24%;background:var(--k,var(--encre));color:var(--creme);
  font-family:var(--f-titre);font-weight:600;transform:rotate(-6deg);flex:none}
.tuile span{width:64%;text-align:center;line-height:1}

/* En-tête */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--creme) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.nav{display:flex;align-items:center;gap:20px;padding-block:12px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--f-titre);font-weight:600;font-size:22px}
.marque .tuile{width:40px;font-size:15px}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-weight:700;font-size:15px}
.nav ul a{text-decoration:none;color:var(--gris)}
.nav ul a:hover{color:var(--encre)}
@media (max-width:820px){.nav ul{display:none}.nav .btn{margin-left:auto}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font:800 16px var(--f-texte);
  padding:14px 22px;border-radius:999px;background:var(--corail);color:#fff;box-shadow:0 3px 0 var(--corail-fonce);transition:transform .15s,box-shadow .15s,opacity .3s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--corail-fonce)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--corail-fonce)}
.btn.petit{padding:10px 16px;font-size:14px}
.btn.repli{opacity:0;pointer-events:none}
.btn .prix{background:rgba(255,255,255,.22);border-radius:999px;padding:2px 10px;font-variant-numeric:tabular-nums}

/* Hero : la marque racontée par ses tuiles */
.hero-fond{--fond:#DCEAE3;--ka:#1E3A32;background:var(--fond);transition:background-color .9s ease;border-radius:0 0 44px 44px;position:relative;overflow:hidden}
.hero-fond::before{content:"";position:absolute;width:62vw;max-width:820px;aspect-ratio:1;right:-14vw;top:-30%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%);pointer-events:none}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;padding-block:44px 60px;position:relative}
.hero h1{font-size:clamp(40px,5.6vw,68px);margin-block:14px 22px}
.hero h1 .tourne{display:block;min-height:2.24em;color:var(--ka);transition:color .6s}
.hero h1 .tourne span{display:inline-block}
.hero h1 .tourne span.entre{animation:entre .55s cubic-bezier(.2,.9,.3,1.2)}
@keyframes entre{from{opacity:0;transform:translateY(.3em) rotate(-2deg)}}
.hero .eyebrow{color:var(--encre);opacity:.7}
.hero .chapo{font-size:clamp(17px,1.6vw,20px);color:var(--encre);opacity:.8;max-width:30em}
.points{display:flex;gap:6px;margin-top:22px;flex-wrap:wrap}
.points button{width:22px;height:22px;border-radius:7px;border:0;padding:0;cursor:pointer;background:var(--k);transform:rotate(-6deg);opacity:.35;transition:opacity .3s,transform .3s}
.points button[aria-pressed="true"]{opacity:1;transform:rotate(-6deg) scale(1.25)}
.chiffres{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}
.chiffres div{display:grid}
.chiffres strong{font-family:var(--f-titre);font-weight:600;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.chiffres span{font-size:14px;font-weight:700;color:var(--gris)}
.defiler{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-weight:800;color:var(--encre);text-decoration:none;font-size:15px}
.defiler::after{content:"↓";display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--encre);animation:bas 1.8s ease-in-out infinite}
@keyframes bas{50%{transform:translateY(4px)}}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-block:32px 48px}}

.nid{container-type:inline-size;position:relative;aspect-ratio:1;width:100%;max-width:560px;margin-inline:auto}
.nid svg.brins{position:absolute;inset:0;width:100%;height:100%}
.page{position:absolute;left:50%;top:50%;width:31cqw;aspect-ratio:210/297;translate:-50% -50%;rotate:-3deg;background:#fff;border-radius:1cqw;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 .3cqw 0 rgba(46,42,51,.08),0 3cqw 5cqw -2.4cqw rgba(46,42,51,.55)}
.page.entre{animation:feuille .6s cubic-bezier(.2,.9,.3,1.15)}
@keyframes feuille{from{opacity:0;transform:translateY(3cqw) scale(.94)}}
.page-tete{background:var(--ka);color:var(--creme);padding:2.2cqw 2.4cqw 2cqw;display:grid;gap:1.1cqw;transition:background-color .6s}
.page-tete .tuile{width:7.4cqw;font-size:2.7cqw;background:var(--creme);color:var(--ka)}
.page-tete small{display:block;font-size:1.35cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.page-tete b{display:block;font-family:var(--f-titre);font-weight:600;font-size:3.5cqw;line-height:1.05}
.page-corps{padding:2cqw 2.4cqw;display:grid;gap:1cqw;align-content:start;flex:1}
.page-corps p{display:grid;grid-template-columns:1.7cqw 1fr;gap:1cqw;align-items:center;font-size:1.65cqw;font-weight:800;line-height:1.2;padding-bottom:1cqw;border-bottom:.12cqw dashed var(--trait)}
.page-corps p::before{content:"";width:1.5cqw;height:1.5cqw;border:.25cqw solid var(--ka);border-radius:.35cqw}
.page-corps i{display:block;height:.9cqw;border-radius:1cqw;background:var(--trait);width:var(--l)}
.page-onglets{position:absolute;right:0;top:34%;display:grid;gap:.6cqw}
.page-onglets span{display:block;width:1.6cqw;height:3.6cqw;border-radius:.6cqw 0 0 .6cqw;background:var(--d)}
.page-pied{display:flex;gap:.7cqw;padding:0 2.4cqw 2.2cqw;margin-top:auto}
.page-pied span{width:1.3cqw;height:1.3cqw;border-radius:50%;background:var(--d)}
.nid a.kit-nid.actif .tuile{transform:rotate(-6deg) scale(1.2) translateY(-1cqw);box-shadow:0 2cqw 3cqw -1.4cqw rgba(46,42,51,.7)}
.nid a.kit-nid.actif small{color:var(--k)}
.nid a.kit-nid{position:absolute;left:var(--x);top:var(--y);width:13.5cqw;translate:-50% -50%;text-decoration:none;display:grid;grid-template-columns:13.5cqw;justify-items:center;gap:1.2cqw;
  animation:eclore .6s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:var(--d)}
.nid a.kit-nid .tuile{width:13.5cqw;font-size:5cqw;box-shadow:0 1.4cqw 2.4cqw -1.4cqw rgba(46,42,51,.55);transition:transform .25s}
.nid a.kit-nid:hover .tuile,.nid a.kit-nid:focus-visible .tuile{transform:rotate(-6deg) scale(1.12) translateY(-1cqw)}
.nid a.kit-nid small{justify-self:center;font-weight:800;font-size:2.35cqw;white-space:nowrap;color:var(--encre);line-height:1}
@keyframes eclore{from{opacity:0;scale:.4}}

/* Le principe */
.principe{padding-block:24px 72px}
.principe-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.principe-grille article{background:var(--carte);border:1px solid var(--trait);border-radius:22px;padding:26px;display:grid;gap:14px;align-content:start}
.principe-grille h3{font-size:22px}
.principe-grille p{color:var(--gris);font-size:16px}
.demo{height:64px;display:flex;align-items:center;gap:6px}
.demo .tuile{width:40px;font-size:14px}
.codes{display:flex;flex-wrap:wrap;gap:6px}
.codes span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;background:var(--creme);border:1px solid var(--trait);font-weight:800;font-size:13px}
.codes span::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--d)}
.versions-demo{display:flex;gap:10px;align-items:flex-end}
.versions-demo div{width:42px;aspect-ratio:210/297;border-radius:4px;border:1px solid var(--trait);box-shadow:0 6px 12px -8px rgba(46,42,51,.4);display:grid;place-items:start;padding:5px}
.versions-demo .ecran{width:58px;aspect-ratio:3/4;border:4px solid var(--encre);border-radius:9px;background:#fff;padding:6px 0;display:grid;align-content:start;gap:3px;place-items:initial}
.versions-demo .ecran::before{display:none}
.versions-demo .ecran b{display:block;width:8px;height:9px;border-radius:2px 0 0 2px;justify-self:end;background:var(--rdv)}
.versions-demo .ecran b:nth-child(2){background:var(--famille)}.versions-demo .ecran b:nth-child(3){background:var(--ecole)}
.versions-demo div::before{content:"";width:60%;height:4px;border-radius:2px;background:var(--corail)}
@media (max-width:820px){.principe-grille{grid-template-columns:1fr}}

/* Boutique */
#kits{padding-block:24px 40px;scroll-margin-top:70px}
.titre-section{display:grid;gap:12px;margin-bottom:34px;max-width:42em}
.titre-section h2{font-size:clamp(30px,4vw,46px)}
.titre-section p{color:var(--gris);font-size:18px}
.rythme{margin-bottom:48px}
.rythme-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px dashed var(--trait)}
.rythme-tete h3{font-size:26px}
.rythme-tete p{color:var(--gris);font-size:16px}
.etagere{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;max-width:calc(var(--n) * 300px)}
@media (max-width:1000px){.etagere{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));max-width:none}}
.kit{background:var(--carte);border:1px solid var(--trait);border-radius:20px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;scroll-margin-top:90px;transition:box-shadow .2s,transform .2s}
.kit:hover{box-shadow:0 18px 30px -22px rgba(46,42,51,.45);transform:translateY(-2px)}
.kit:target{outline:3px solid var(--k);outline-offset:3px}
.kit-haut{background:var(--kc);padding:18px 16px 14px;display:flex;align-items:center;gap:14px}
.kit-haut .tuile{width:48px;font-size:17px}
.kit-haut h4{margin:0;font-family:var(--f-titre);font-weight:600;font-size:21px;line-height:1.1;color:var(--k)}
.kit-haut h4 small{display:block;font-family:var(--f-texte);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--gris);margin-bottom:3px}
.kit-corps{padding:14px 16px 18px;display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.kit-corps > p{color:var(--gris);font-size:15px;line-height:1.5}
.kit-corps ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:14.5px;font-weight:700;align-content:start}
.kit-corps li{display:grid;grid-template-columns:16px 1fr;gap:8px}
.kit-corps li::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--k);margin-top:7px;transform:rotate(-6deg)}
.kit-achat{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px dashed var(--trait)}
.kit-achat strong{font-family:var(--f-titre);font-weight:600;font-size:24px;font-variant-numeric:tabular-nums}
.kit-achat .btn{margin-left:auto;padding:10px 16px;font-size:14.5px;background:var(--k);box-shadow:0 3px 0 color-mix(in srgb,var(--k) 70%,#000)}
.kit-achat .btn:hover{box-shadow:0 4px 0 color-mix(in srgb,var(--k) 70%,#000)}

/* Coffret */
.coffret{background:var(--encre);color:var(--creme);border-radius:28px;padding:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 40px;align-items:center;margin-bottom:24px}
.coffret .eyebrow{color:#F3B9A6}
.coffret h2{font-size:clamp(28px,3.6vw,40px);margin-block:8px 12px}
.coffret p{opacity:.8;max-width:34em}
.coffret .tuiles{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.coffret .tuiles .tuile{width:30px;font-size:10px}
.coffret-prix{display:grid;justify-items:start;gap:10px}
.coffret-prix .barre{text-decoration:line-through;opacity:.6;font-weight:700;font-variant-numeric:tabular-nums}
.coffret-prix strong{font-family:var(--f-titre);font-weight:600;font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
.coffret-prix .eco{background:var(--famille);color:var(--encre);font-weight:800;font-size:13px;padding:3px 10px;border-radius:999px}
@media (max-width:760px){.coffret{grid-template-columns:1fr;padding:28px 22px}}

/* Étapes */
section.bloc{padding-block:64px}
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0;counter-reset:e}
.etapes li{counter-increment:e;display:grid;gap:8px;padding-top:18px;border-top:3px solid var(--d)}
.etapes li::before{content:counter(e);font-family:var(--f-titre);font-size:40px;font-weight:600;color:var(--d);line-height:1}
.etapes strong{font-family:var(--f-titre);font-size:21px;font-weight:600}
.etapes p{color:var(--gris);font-size:15.5px}
@media (max-width:760px){.etapes{grid-template-columns:1fr}}

.histoire{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;background:#DCEAE3;border-radius:28px;padding:44px}
.histoire .tuile{width:140px;font-size:52px;--k:#1E3A32}
.histoire h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:14px}
.histoire p{max-width:40em;font-size:17.5px}
.histoire p + p{margin-top:12px}
@media (max-width:700px){.histoire{grid-template-columns:1fr;padding:28px 22px;gap:22px}.histoire .tuile{width:84px;font-size:31px}}

.faq{display:grid;gap:10px;max-width:780px}
details{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:0 20px}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:800;display:flex;gap:12px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-family:var(--f-titre);font-size:24px;color:var(--corail);line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:18px;color:var(--gris);font-size:16px;max-width:62ch}

footer{border-top:1px solid var(--trait);padding-block:32px 40px;font-size:14px;color:var(--gris)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer .marque{font-size:18px;color:var(--encre)}
footer .marque .tuile{width:30px;font-size:11px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--encre);color:var(--creme);
  padding:12px 18px;border-radius:12px;font-weight:700;font-size:15px;max-width:calc(100% - 32px);z-index:20;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Micro-site : composants partagés ===== */
.tuile{color:var(--kt,var(--creme))}
.nav ul a[aria-current="page"]{color:var(--encre);text-decoration:underline;text-decoration-color:var(--corail);text-decoration-thickness:3px;text-underline-offset:6px}
.nav .menu-mobile{display:none;margin-left:auto;font:800 15px var(--f-texte);background:none;border:2px solid var(--encre);border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--encre)}
@media (max-width:820px){
  .nav .menu-mobile{display:inline-flex}
  .nav .btn{display:none}
  .nav ul.ouvert{display:grid;position:absolute;left:0;right:0;top:100%;background:var(--creme);border-bottom:1px solid var(--trait);padding:12px 20px 18px;gap:12px;font-size:17px}
}
.ariane{font-size:14px;font-weight:700;color:var(--gris);display:flex;flex-wrap:wrap;gap:6px;padding-block:18px 0}
.ariane a{color:var(--gris);text-decoration:none}
.ariane a:hover{color:var(--encre)}
.ariane span[aria-hidden]{opacity:.5}

.bandeau{background:var(--fond,#EFE6D8);border-radius:0 0 44px 44px;padding-block:36px 52px;margin-top:14px}
.bandeau h1{font-size:clamp(36px,5vw,58px);margin-block:14px 16px}
.bandeau .chapo{font-size:clamp(17px,1.6vw,20px);max-width:38em;color:var(--encre);opacity:.82}
.section{padding-block:64px}
.section.serre{padding-top:24px}

/* Prix */
.prix-bloc{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.prix-bloc strong{font-family:var(--f-titre);font-weight:600;font-size:30px;font-variant-numeric:tabular-nums;line-height:1}
.prix-bloc s{color:var(--gris);font-weight:700;font-variant-numeric:tabular-nums}
.pastille-lancement{display:inline-block;background:var(--famille);color:var(--encre);font-weight:800;font-size:12px;letter-spacing:.04em;padding:3px 10px;border-radius:999px}

/* Fiches du catalogue */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtres button{font:800 14px var(--f-texte);padding:9px 16px;border-radius:999px;border:1.5px solid var(--trait);background:var(--carte);color:var(--encre);cursor:pointer}
.filtres button[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--creme)}
.catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.fiche{background:var(--carte);border:1px solid var(--trait);border-radius:20px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:box-shadow .2s,transform .2s}
.fiche:hover{box-shadow:0 18px 30px -22px rgba(46,42,51,.45);transform:translateY(-2px)}
.fiche-haut{background:var(--kc);padding:18px;display:flex;align-items:center;gap:14px;text-decoration:none}
.fiche-haut .tuile{width:52px;font-size:18px}
.fiche-haut b{display:block;font-family:var(--f-titre);font-weight:600;font-size:22px;line-height:1.1;color:var(--k)}
.fiche-haut small{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--gris);margin-bottom:3px}
.fiche-corps{padding:16px 18px 18px;display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.fiche-corps .promesse{font-family:var(--f-titre);font-weight:500;font-size:17px;line-height:1.3}
.fiche-corps .meta{display:flex;flex-wrap:wrap;gap:6px;align-content:start}
.meta span{font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--creme);border:1px solid var(--trait)}
.fiche-pied{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px dashed var(--trait)}
.fiche-pied .prix-bloc strong{font-size:22px}
.fiche-pied .actions{margin-left:auto;display:flex;gap:8px}
.lien-fleche{font-weight:800;font-size:14.5px;color:var(--k,var(--encre));text-decoration:none;align-self:center}
.lien-fleche:hover{text-decoration:underline}
.btn.couleur{background:var(--k);box-shadow:0 3px 0 color-mix(in srgb,var(--k) 70%,#000);padding:10px 16px;font-size:14.5px;color:var(--kt,#fff)}
.btn.couleur:hover{box-shadow:0 4px 0 color-mix(in srgb,var(--k) 70%,#000)}
.btn.ligne{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 2px var(--encre)}
.btn.ligne:hover{background:var(--carte);box-shadow:inset 0 0 0 2px var(--encre)}

/* Accueil : gammes en bref */
.gammes{display:grid;gap:14px}
.gamme-ligne{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:16px 28px;align-items:center;background:var(--carte);border:1px solid var(--trait);border-radius:22px;padding:22px 24px}
.gamme-ligne h3{font-size:22px}
.gamme-ligne p{color:var(--gris);font-size:15px}
.puces-kits{display:flex;flex-wrap:wrap;gap:10px}
.puce-kit{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:14px;background:var(--kc);text-decoration:none;font-weight:800;font-size:15px;color:var(--k);transition:transform .15s}
.puce-kit:hover{transform:translateY(-2px)}
.puce-kit .tuile{width:34px;font-size:12px}
.puce-kit small{font-weight:700;color:var(--gris);font-size:12.5px}
@media (max-width:760px){.gamme-ligne{grid-template-columns:1fr}}

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.encart{border-radius:26px;padding:32px;display:grid;gap:14px;align-content:start}
.encart h2{font-size:clamp(26px,3vw,34px)}
.encart p{max-width:36em}
.encart.sombre{background:var(--encre);color:var(--creme)}
.encart.sombre .eyebrow{color:#F3B9A6}
.encart.sombre p{opacity:.8}
.encart.sombre .btn.ligne{color:var(--creme);box-shadow:inset 0 0 0 2px rgba(255,247,236,.7)}
.encart.sombre .btn.ligne:hover{background:rgba(255,247,236,.08)}
.encart.clair{background:var(--fond)}
.rangee-tuiles{display:flex;flex-wrap:wrap;gap:6px}
.rangee-tuiles .tuile{width:30px;font-size:10px}
.rangee-boutons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}

/* Page kit */
.kit-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
@media (max-width:860px){.kit-hero{grid-template-columns:1fr}}
.kit-titre{display:flex;align-items:center;gap:14px}
.kit-titre .tuile{width:64px;font-size:23px}
.kit-titre span.nom{font-family:var(--f-titre);font-weight:600;font-size:24px;color:var(--k)}
.kit-titre small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--gris)}
.faits{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.faits div{display:grid}
.faits strong{font-family:var(--f-titre);font-weight:600;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.faits span{font-size:13.5px;font-weight:700;color:var(--gris)}
.achat-carte{margin-top:26px;background:var(--carte);border-radius:20px;padding:20px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;box-shadow:0 18px 40px -30px rgba(46,42,51,.6)}
.achat-carte .prix-bloc strong{font-size:38px}
.achat-carte .btn{margin-left:auto}
.achat-carte .rassure{flex-basis:100%;font-size:13.5px;color:var(--gris);font-weight:700}

.pile-kit{container-type:inline-size;position:relative;width:min(380px,100%);margin-inline:auto;aspect-ratio:1/1.12}
.pile-kit .feuille-fond{position:absolute;width:70cqw;aspect-ratio:210/297;background:#fff;border-radius:2.4cqw;box-shadow:0 3cqw 6cqw -4cqw rgba(46,42,51,.5)}
.pile-kit .feuille-fond.a{left:4cqw;top:8cqw;rotate:-8deg;background:var(--creme)}
.pile-kit .feuille-fond.b{right:2cqw;top:2cqw;rotate:6deg}
.pile-kit .couv{position:absolute;left:15cqw;top:6cqw;width:70cqw;aspect-ratio:210/297;background:#fff;border-radius:2.4cqw;overflow:hidden;rotate:-2deg;
  box-shadow:0 1cqw 0 rgba(46,42,51,.06),0 7cqw 12cqw -6cqw rgba(46,42,51,.6);display:flex;flex-direction:column}
.couv-tete{background:var(--k);color:var(--kt,var(--creme));padding:7cqw 6cqw 6cqw;display:grid;gap:4cqw}
.couv-tete .tuile{width:18cqw;font-size:6.6cqw;background:var(--creme);--kt:var(--k);color:var(--k)}
.couv-tete small{font-size:3cqw;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.8}
.couv-tete b{display:block;font-family:var(--f-titre);font-weight:600;font-size:9cqw;line-height:1.02}
.couv-corps{padding:5cqw 6cqw;display:grid;gap:3cqw;align-content:start;flex:1}
.couv-corps p{display:grid;grid-template-columns:4cqw 1fr;gap:2.4cqw;align-items:center;font-size:3.6cqw;font-weight:800;line-height:1.2;padding-bottom:2.4cqw;border-bottom:.3cqw dashed var(--trait)}
.couv-corps p::before{content:"";width:3.4cqw;height:3.4cqw;border:.6cqw solid var(--k);border-radius:.8cqw}
.couv-pied{display:flex;gap:1.6cqw;padding:0 6cqw 5cqw}
.couv-pied span{width:3cqw;height:3cqw;border-radius:50%;background:var(--d)}
.couv .onglets{position:absolute;right:0;top:46%;display:grid;gap:1.4cqw}
.couv .onglets span{display:block;width:3.4cqw;height:8cqw;border-radius:1.4cqw 0 0 1.4cqw;background:var(--d)}

.compo{display:flex;height:22px;border-radius:999px;overflow:hidden;gap:2px;margin-block:8px 6px}
.compo span{flex:var(--p) 1 0;background:var(--k);opacity:var(--o)}
.compo-legende{font-size:13.5px;color:var(--gris);font-weight:700}
.blocs{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:14px;margin-top:26px}
.bloc{background:var(--carte);border:1px solid var(--trait);border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-content:start}
.bloc .nb{grid-row:span 2;width:46px;height:46px;border-radius:14px;background:var(--kc);color:var(--k);display:grid;place-items:center;font-family:var(--f-titre);font-weight:600;font-size:19px;font-variant-numeric:tabular-nums;transform:rotate(-6deg)}
.bloc h3{font-size:19px;align-self:end}
.bloc p{color:var(--gris);font-size:15px;line-height:1.5}
.bloc small{font-weight:800;color:var(--gris)}

.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.format{border:1.5px solid var(--trait);border-radius:18px;padding:18px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--carte)}
.format .vignette{width:44px;aspect-ratio:210/297;border-radius:5px;border:1px solid var(--trait);display:grid;place-items:start;padding:5px}
.format .vignette::before{content:"";width:60%;height:4px;border-radius:2px;background:var(--corail)}
.format .vignette.ecran{width:52px;aspect-ratio:3/4;border:4px solid var(--encre);border-radius:9px;background:#fff;display:grid;align-content:start;gap:3px;padding:6px 0;place-items:initial}
.format .vignette.ecran::before{display:none}
.format .vignette.ecran b{display:block;width:8px;height:9px;border-radius:2px 0 0 2px;justify-self:end;background:var(--d)}
.format strong{display:block;font-size:16px}
.format span{display:block;color:var(--gris);font-size:14px;line-height:1.45}
@media (max-width:820px){.formats{grid-template-columns:1fr}}
.note-kit{margin-top:22px;background:var(--kc);border-radius:16px;padding:16px 20px;font-weight:700;font-size:15.5px;color:var(--encre)}

.voisins{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:28px;border-top:1px dashed var(--trait)}
.voisins a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800}
.voisins a .tuile{width:34px;font-size:12px}

/* Maternelle */
.tableau-defile{overflow-x:auto;border:1px solid var(--trait);border-radius:20px;background:var(--carte)}
table.domaines{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px}
table.domaines th,table.domaines td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--trait)}
table.domaines thead th{font-family:var(--f-titre);font-weight:600;font-size:17px;background:var(--k);color:var(--encre)}
table.domaines thead th:first-child{background:var(--creme)}
table.domaines tbody th{font-weight:800;width:18%}
table.domaines tr:last-child td,table.domaines tr:last-child th{border-bottom:0}
.liste-simple{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.liste-simple li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.liste-simple li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--k,var(--corail));margin-top:8px;transform:rotate(-6deg)}

/* Coffrets */
.coffrets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:820px){.coffrets{grid-template-columns:1fr}}
.coffret-carte{background:var(--carte);border:1px solid var(--trait);border-radius:24px;padding:26px;display:grid;gap:14px;align-content:start}
.coffret-carte.vedette{background:var(--encre);color:var(--creme);border-color:var(--encre)}
.coffret-carte.vedette p,.coffret-carte.vedette .valeur{color:rgba(255,247,236,.78)}
.coffret-carte.vedette .tuile{box-shadow:0 0 0 2px var(--encre)}
.coffret-carte h3{font-size:26px}
.coffret-carte p{color:var(--gris)}
.coffret-carte ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.coffret-carte li a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;text-decoration:none;padding:4px 10px 4px 4px;border-radius:10px;background:var(--kc);color:var(--k)}
.coffret-carte li .tuile{width:22px;font-size:8px}
.coffret-carte .valeur{font-size:14px;font-weight:700;color:var(--gris)}
.coffret-carte .prix-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:14px;border-top:1px dashed var(--trait)}
.coffret-carte.vedette .prix-ligne{border-color:rgba(255,247,236,.2)}
.coffret-carte .prix-ligne strong{font-family:var(--f-titre);font-weight:600;font-size:34px;font-variant-numeric:tabular-nums}
.coffret-carte .prix-ligne .btn{margin-left:auto}
.economie{background:var(--famille);color:var(--encre);font-weight:800;font-size:12.5px;padding:3px 10px;border-radius:999px}

/* Pages de texte */
.texte{max-width:760px}
.texte h2{font-size:28px;margin-block:40px 14px}
.texte h2:first-child{margin-top:0}
.texte h3{font-size:20px;margin-block:24px 8px}
.texte p,.texte li{font-size:16.5px;color:var(--encre)}
.texte p + p{margin-top:12px}
.texte ul{padding-left:20px;display:grid;gap:6px}
.a-remplir{background:#FDF0CC;border-radius:6px;padding:1px 6px;font-weight:800}

/* Pied de page */
footer.pied{border-top:1px solid var(--trait);padding-block:44px 40px;font-size:14.5px;color:var(--gris)}
.pied-grille{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.pied-grille h4{margin:0 0 10px;font-family:var(--f-titre);font-weight:600;font-size:16px;color:var(--encre)}
.pied-grille ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pied-grille a{color:var(--gris);text-decoration:none}
.pied-grille a:hover{color:var(--encre)}
.pied-grille p{max-width:26em;margin-top:12px}
.pied-bas{margin-top:30px;padding-top:18px;border-top:1px solid var(--trait);font-size:13px}
@media (max-width:820px){.pied-grille{grid-template-columns:1fr 1fr}}

@media (max-width:900px){.blocs{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}

.pastille-bientot{display:inline-block;font-weight:800;font-size:13px;padding:5px 12px;border-radius:999px;background:var(--creme);color:var(--encre);border:1.5px dashed var(--k,var(--gris));white-space:nowrap}
.achat-carte .pastille-bientot{font-size:15px;padding:8px 16px}
.coffret-carte.vedette .pastille-bientot,.encart.sombre .pastille-bientot{background:transparent;color:var(--creme);border-color:rgba(255,247,236,.5)}