/* ================================================================
   Et si on faisait… — design system
   Palette : crème #FBF7F1 · encre #2B2237 · violet #7C4DC4
             corail #FF8A70 · soleil #FFC94D
   Typo : Meow Script (accents manuscrits) · Fraunces (titres)
          Plus Jakarta Sans (texte)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Meow+Script&family=Fraunces:opsz,wght@9..144,400..700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --creme: #FBF7F1;
  --encre: #2B2237;
  --violet: #7C4DC4;
  --violet-fonce: #5B2E9E;
  --violet-pale: #EFE7FB;
  --corail: #FF8A70;
  --corail-pale: #FFE8E2;
  --soleil: #FFC94D;
  --soleil-pale: #FFF3D6;
  --sauge: #8FBC6F;
  --blanc: #FFFFFF;
  --gris-texte: #6C6478;
  --degrade: linear-gradient(100deg, var(--soleil) 0%, var(--corail) 45%, var(--violet) 100%);
  --degrade-pastel: linear-gradient(100deg, #FFE1A8 0%, #FFC3B4 45%, #C9A6F2 100%);
  --radius: 20px;
  --shadow: 0 10px 30px rgba(91, 46, 158, .10);
  --font-script: 'Meow Script', cursive;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* L'attribut hidden doit toujours cacher, même sur les .btn (qui forcent display). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--encre);
  background: var(--creme);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--violet); text-decoration: none; font-weight: 600; }
a:hover { color: var(--violet-fonce); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Blobs organiques en fond ------------------------------- */
body::before, body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-size: contain; opacity: .8;
}
body::before {
  width: 480px; height: 480px; left: -200px; top: 6vh;
  background-image: url('/img/blob-1.svg');
  transform: rotate(-14deg);
}
body::after {
  width: 430px; height: 430px; right: -190px; top: 52vh;
  background-image: url('/img/blob-2.svg');
  transform: rotate(23deg);
}


/* --- Icônes lineart -------------------------------------------- */
.icon {
  width: 1.1em; height: 1.1em; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.18em; color: var(--violet);
}
.btn .icon, .card-cat .icon { color: currentColor; }
.icon-lg { width: 1.6em; height: 1.6em; }
.icon-hero { width: 120px; height: 120px; stroke-width: 1.2; opacity: .8; }
.meta-pill .icon { width: .95em; height: .95em; color: var(--gris-texte); }

/* --- Header --------------------------------------------------- */
.site-header {
  display: flex; align-items: center; gap: 28px;
  padding: 14px clamp(16px, 4vw, 48px);
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 241, .85); backdrop-filter: blur(10px);
}
.logo { text-decoration: none; color: var(--encre); line-height: .9; }
.logo-top { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.logo-script { font-family: var(--font-script); font-size: 2.1rem; color: var(--violet); }
.main-nav { display: flex; gap: 22px; margin-inline: auto; flex-wrap: wrap; }
.main-nav a {
  text-decoration: none; color: var(--encre); font-weight: 600; font-size: .95rem;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.main-nav a:hover { border-bottom-color: var(--corail); }
.nav-br { display: none; }
.nav-cahiers { line-height: 1.15; }
/* Menu desktop : "Cahiers de vacances / et exercices" sur 2 lignes */
@media (min-width: 901px) { .main-nav { align-items: center; } .nav-br { display: inline; } .nav-cahiers { text-align: center; } }
.nav-urgence { color: var(--corail) !important; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.burger { display: none; font-size: 1.4rem; background: var(--blanc); border: none; border-radius: 12px; padding: 6px 12px; cursor: pointer; box-shadow: var(--shadow); }

/* --- Boutons & puces ------------------------------------------ */
.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  padding: 12px 22px; border-radius: 999px; transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary { background: var(--violet); color: var(--blanc); }
.btn-dark { background: var(--encre); color: var(--blanc); }
.btn-coral { background: var(--corail); color: var(--blanc); }
.btn-ghost { background: var(--blanc); color: var(--encre); box-shadow: var(--shadow); }
.btn-account { background: var(--violet); color: var(--blanc); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blanc); border: 1.5px solid transparent; border-radius: 999px;
  padding: 8px 16px; font-size: .88rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 3px 10px rgba(91,46,158,.06);
}
.chip:hover { border-color: var(--violet); }
.chip.active, .chip[aria-pressed="true"] { background: var(--violet-pale); border-color: var(--violet); color: var(--violet-fonce); }
.chip-lilac { background: var(--violet-pale); }
.chip-sun { background: var(--soleil-pale); }
.chip-coral { background: var(--corail-pale); }

/* Échelle de bazar : 3 éponges (bicolores, pleines), celles au-delà du niveau sont estompées */
.mess-scale { display: inline-flex; align-items: center; gap: 4px; }
.mess-scale .icon { stroke: none; width: 1.7em; height: 1.7em; }
.mess-scale .icon.is-on { opacity: 1; }
.mess-scale .icon.is-off { opacity: .28; }

/* Mode duo : le bouton star des quiz, en vert sauge bien à lui */
.duo-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--sauge); color: var(--blanc);
  border: 2px solid transparent; border-radius: 999px;
  padding: 12px 22px; font: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; margin: 10px 0 4px;
  box-shadow: 0 8px 22px rgba(111, 158, 79, .35);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.duo-toggle:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(111, 158, 79, .45); }
.duo-toggle .icon { color: var(--blanc); }
.duo-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.duo-toggle .duo-state { font-weight: 600; opacity: .85; font-size: .85rem; }
.duo-toggle:has(input:checked) {
  background: #6F9E4F; border-color: var(--blanc);
  box-shadow: 0 8px 22px rgba(91, 46, 158, .25);
}

/* --- Titres ---------------------------------------------------- */
.eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
  font-weight: 700; color: var(--violet);
}
h1, .h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; margin: .3em 0; }
h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.script { font-family: var(--font-script); color: var(--violet); font-weight: 400; font-size: 1.45em; line-height: .8; vertical-align: 0.02em; }

/* --- Sections & grilles ---------------------------------------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.section { padding: 48px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.link-arrow { font-weight: 700; text-decoration: none; }
.link-arrow::after { content: ' →'; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin-top: 22px; }
.card {
  background: var(--blanc); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: var(--encre);
  transition: transform .18s;
}
.card:hover { transform: translateY(-4px); }
.card-media {
  height: 150px; position: relative;
  background: linear-gradient(135deg, var(--violet-pale), var(--corail-pale) 55%, var(--soleil-pale));
  display: flex; align-items: center; justify-content: center;
}
.card-cat {
  position: absolute; left: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--violet); color: var(--blanc); box-shadow: var(--shadow);
  z-index: 2;                          /* passe au-dessus de l'image de carte */
}
.card-cat.cuisine { background: var(--corail); }
.card-cat.jeux-quiz { background: var(--soleil); }
.card-cat.nature { background: var(--sauge); }

/* Pastille de catégorie posée dans le texte (eyebrow des fiches activité) :
   même code couleur que sur les cartes, mais hors de la photo. */
.eyebrow-cat { display: flex; align-items: center; gap: 10px; }
.card-cat.cat-inline {
  position: static; width: 32px; height: 32px; font-size: .95rem; flex: none;
}
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--corail); }
.card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0; }
.card-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.meta-pill {
  border: 1px solid #E8E1F5; border-radius: 999px; padding: 3px 10px;
  font-size: .78rem; font-weight: 600; color: var(--gris-texte); background: var(--blanc);
}

/* --- Hero -------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 24px; }
/* Visuel du hero : même traitement que les photos d'articles,
   un blob dégradé glissé DERRIÈRE la photo, pivoté et décalé. */
.hero-visual {
  min-height: 340px;
  position: relative;
}
.hero-visual::before {
  content: ""; position: absolute; inset: 0;
  background: var(--degrade-pastel);
  border-radius: 34% 46% 30% 48% / 58% 40% 62% 38%;
  transform: rotate(-3deg) translate(-14px, 12px);
}
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1;                         /* la photo devant le blob */
  border-radius: 26% 40% 24% 42% / 46% 32% 52% 30%;
}
.search-bar {
  display: flex; align-items: center; gap: 10px; background: var(--blanc);
  border-radius: 999px; box-shadow: var(--shadow); padding: 6px 8px 6px 20px; margin: 20px 0 14px;
}
.search-bar input { border: none; outline: none; flex: 1; font: inherit; background: transparent; }
.quick-chips { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Barre de filtres (page activités) --------------------------- */
.filter-bar {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  background: var(--blanc); border-radius: 999px; box-shadow: var(--shadow);
  padding: 14px 22px; margin-top: 32px;
}
.filter-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px; min-width: 120px; }
.filter-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--violet-fonce); padding-left: 12px; }
.filter-field select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-weight: 600; font-size: .88rem; color: var(--encre);
  background: var(--violet-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237C4DC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid transparent; border-radius: 999px;
  padding: 9px 34px 9px 14px; cursor: pointer;
}
.filter-field select:hover, .filter-field select:focus { border-color: var(--violet); outline: none; }
.filter-bar .filter-fratrie { flex: 0 0 auto; margin-bottom: 2px; }
.filter-reset {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 600; color: var(--violet);
  text-decoration: underline; padding: 9px 4px; margin-bottom: 2px;
}
.filter-reset:hover { color: var(--violet-fonce); }
@media (max-width: 720px) {
  .filter-bar { border-radius: 26px; }
  .filter-field { flex: 1 1 44%; }
}

/* --- Mini moteur « Et si on faisait… » --------------------------- */
.idea-engine {
  background: var(--blanc); border-radius: 26px; box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 26px); margin-top: 36px; position: relative; overflow: hidden;
}
.idea-engine h2 { margin: 0 0 4px; }
.idea-engine > p { margin: 0 0 14px; }
.idea-engine::after {
  content: ''; position: absolute; right: -70px; bottom: -80px; width: 220px; height: 220px;
  background: var(--degrade); opacity: .16; border-radius: 71% 29% 55% 45% / 38% 67% 33% 62%; transform: rotate(19deg);
  pointer-events: none;  /* pur décor : ne doit jamais capter les clics du CTA */
}
.engine-row { margin: 10px 0; }
.engine-label { font-weight: 700; margin-bottom: 6px; display: block; }
.engine-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* Correction affichée après validation du quiz */
.engine-chips.is-corrected .chip { cursor: default; }
.engine-chips.is-corrected .chip:hover { border-color: transparent; }
.chip.is-correct, .engine-chips.is-corrected .chip.is-correct[aria-pressed="true"] {
  background: var(--sauge); border-color: var(--sauge); color: var(--blanc);
}
.chip.is-wrong, .engine-chips.is-corrected .chip.is-wrong[aria-pressed="true"] {
  background: var(--corail); border-color: var(--corail); color: var(--blanc);
}
.chip .mark { font-weight: 800; }
.quiz-intro { color: var(--gris-texte); font-style: italic; margin: -2px 0 14px; max-width: 60ch; }
.engine-submit { margin-top: 0; }
.idea-results { margin-top: 26px; }

/* Tunnel par étapes */
.engine-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.engine-count { font-weight: 700; font-size: .85rem; color: var(--violet-fonce); white-space: nowrap; }
.engine-bar { flex: 1; height: 8px; background: var(--violet-pale); border-radius: 999px; overflow: hidden; }
.engine-bar span { display: block; height: 100%; width: 20%; background: var(--violet); border-radius: 999px; transition: width .3s ease; }
.engine-step { display: none; min-height: 72px; }
.engine-step.is-current { display: block; animation: engineIn .25s ease; }
.engine-nav { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.engine-nav-spacer { flex: 1; }
.btn-back { background: none; border: none; font: inherit; font-weight: 700; color: var(--gris-texte); cursor: pointer; padding: 8px 4px; }
.btn-back:hover { color: var(--encre); }
@keyframes engineIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .engine-step.is-current { animation: none; } }

/* --- Bandeau dégradé --------------------------------------------- */
.banner-grad {
  border-radius: 26px; padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(100deg, #C9A6F2 0%, var(--corail-pale) 55%, var(--soleil-pale) 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.banner-grad h2 { margin: 0 0 6px; }

/* --- Formulaires -------------------------------------------------- */
.form-card {
  background: var(--blanc); border-radius: 26px; box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 40px); max-width: 460px; margin: 30px auto;
}
.form-card label { font-weight: 700; display: block; margin: 14px 0 6px; }
.form-card input, .form-card select, .form-card textarea {
  width: 100%; padding: 12px 16px; border: 1.5px solid #E8E1F5; border-radius: 14px;
  font: inherit; background: var(--creme);
}
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--violet); border-color: transparent; }
.form-error { color: #C0392B; font-weight: 600; margin-top: 10px; min-height: 1.4em; }
.form-ok { color: var(--sauge); font-weight: 700; }

.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-media { position: relative; margin-top: 20px; }

/* Cadre organique de la bannière : deux blobs décalés (cadre + photo)
   → le liseré dégradé varie en épaisseur, effet dessiné à la main.
   Tout en courbes (border-radius), aucune ligne cassée. */
/* Cadre organique de la bannière : même traitement que les photos d'article,
   un blob dégradé glissé DERRIÈRE la photo, pivoté et décalé. */
.banner-frame {
  display: grid;
}
.banner-frame > picture { grid-area: 1 / 1; display: block; } /* si l'image est dans un <picture> */
.banner-frame::before {
  content: ""; grid-area: 1 / 1;
  background: var(--degrade-pastel);
  border-radius: 34% 46% 30% 48% / 58% 40% 62% 38%;
  transform: rotate(-5deg) translate(-14px, 12px) scale(1.045);
}
.activity-banner {
  grid-area: 1 / 1;
  position: relative; z-index: 1;     /* la photo devant le blob */
  width: 100%; height: 340px; object-fit: cover; display: block;
  border-radius: 26% 40% 24% 42% / 46% 32% 52% 30%;
}
@media (max-width: 600px) { .activity-banner { height: 240px; } }

.activity-body figure { margin: 26px 0; display: grid; }

/* Photo "organique" dans les articles : un blob dégradé glissé DERRIÈRE la
   photo, même famille de forme mais pivoté et décalé → effet papiers découpés
   superposés. La photo elle-même garde ses coins organiques, sans liseré. */
.activity-body figure::before {
  content: ""; grid-area: 1 / 1;
  background: var(--degrade-pastel);  /* pastel doux : miel → pêche → lilas */
  border-radius: 34% 46% 30% 48% / 58% 40% 62% 38%;
  transform: rotate(-9deg) translate(-12px, 10px) scale(1.07);
}
.activity-body figure img {
  grid-area: 1 / 1;                   /* même cellule que le blob : il dépasse tout autour */
  position: relative; z-index: 1;     /* la photo DEVANT le blob (le transform du ::before
                                         crée un contexte d'empilement peint après le flux) */
  display: block; width: 100%;
  border-radius: 46% 34% 50% 30% / 36% 54% 32% 58%;
}
.activity-body figure:nth-of-type(even)::before {
  border-radius: 52% 30% 48% 34% / 38% 58% 34% 54%;  /* forme miroir, pour alterner */
  transform: rotate(9deg) translate(12px, -10px) scale(1.07);
}
.activity-body figure:nth-of-type(even) img {
  border-radius: 34% 48% 30% 52% / 54% 34% 58% 30%;
}
.activity-body figcaption {
  grid-row: 2; text-align: center;
  /* Le blob ::before déborde sous la photo (rotate + scale + translate) : la marge
     doit grandir avec la largeur de la figure pour passer SOUS le blob, pas dessus.
     % = largeur de la figure → ~53px sur un article pleine largeur, ~28px en fig-cote. */
  margin-top: clamp(22px, 7%, 58px);
  position: relative; z-index: 1;  /* et toujours DEVANT le blob au cas où */
}

/* Figures sans légende (ex. le hero réinjecté au milieu de l'article par le
   serveur) : le blob ::before est pivoté + agrandi, il déborde donc au-dessus
   et en dessous de la photo. D'ordinaire c'est la figcaption qui réserve
   l'espace de ce débord ; quand il n'y en a pas, le paragraphe voisin remonte
   sous le blob et son texte passe dessous. On recrée donc la même marge des
   deux côtés. (% = largeur de la figure, comme pour la figcaption.) */
.activity-body figure:not(:has(figcaption)) {
  margin-top: clamp(34px, 8.5%, 70px);
  margin-bottom: clamp(34px, 8.5%, 70px);
}

/* Le texte de l'article passe TOUJOURS au-dessus des blobs décoratifs des
   figures : le blob ::before (dégradé pastel) déborde de la photo à cause de
   son transform et vient sinon mordre sur le paragraphe voisin. On élève donc
   le texte au-dessus du blob (qui reste, lui, en z-index auto/0). */
.activity-body > p,
.activity-body > h2,
.activity-body > h3,
.activity-body > h4,
.activity-body > ul,
.activity-body > ol,
.activity-body > blockquote,
.fig-cote > :not(figure) {
  position: relative;
  z-index: 2;
}

/* Photos verticales : réduites, avec le texte en colonne à côté sur desktop.
   <div class="fig-cote"> = figure + bloc de texte côte à côte,
   variante --droite pour alterner le côté de la photo. Empilé sur mobile. */
.fig-cote { display: grid; gap: 30px; align-items: center; margin: 28px 0; }
.fig-cote figure { margin: 0; }
.fig-cote > :not(figure) { min-width: 0; }
.fig-cote--droite figure::before {
  border-radius: 52% 30% 48% 34% / 38% 58% 34% 54%;
  transform: rotate(9deg) translate(12px, -10px) scale(1.07);
}
.fig-cote--droite figure img { border-radius: 34% 48% 30% 52% / 54% 34% 58% 30%; }
@media (min-width: 701px) {
  .fig-cote { grid-template-columns: minmax(0, 400px) 1fr; }
  .fig-cote--droite { grid-template-columns: 1fr minmax(0, 400px); }
  .fig-cote--droite figure { order: 2; }
}
.activity-body figure.fig-portrait { max-width: 460px; margin-left: auto; margin-right: auto; }

.activity-body h2 { margin: 28px 0 10px; }
.activity-body ul, .activity-body ol { padding-left: 1.2em; }
.activity-body li { margin: 6px 0; }

/* --- Fiche activité ----------------------------------------------- */
.activity-hero { padding-top: 30px; max-width: 760px; }
.activity-meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.activity-body { max-width: 760px; font-size: 1.05rem; }
.activity-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0; }

/* --- Footer -------------------------------------------------------- */
.site-footer { margin-top: 60px; padding: 48px clamp(16px, 4vw, 48px) 20px; background: var(--blanc); border-radius: 40px 40px 0 0; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 36px; max-width: 1180px; margin: 0 auto; }
.footer-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 10px; }
.footer-nav { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { text-decoration: none; color: var(--gris-texte); font-weight: 600; }
.footer-nav a:hover { color: var(--violet); }
.footer-brand p { color: var(--gris-texte); font-size: .92rem; }
.footer-brand .heart { color: var(--corail); }
.newsletter-form { display: flex; gap: 8px; margin-top: 12px; }
.newsletter-form input {
  flex: 1; border: 1.5px solid #E8E1F5; border-radius: 999px; padding: 10px 18px; font: inherit;
}
.footer-legal { text-align: center; color: var(--gris-texte); font-size: .85rem; margin-top: 36px; }

/* --- Divers --------------------------------------------------------- */
.empty-state { color: var(--gris-texte); font-weight: 600; padding: 20px 0; }
.result-count { font-size: 0.82rem; color: var(--gris-texte); margin: 0 0 10px; }
.result-count:empty { display: none; }
.page-hero { max-width: 720px; padding-top: 24px; }

/* --- Fil d'Ariane ---------------------------------------------------- */
.breadcrumb { padding-top: 16px; }
.breadcrumb-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  list-style: none; margin: 0;
  font-size: .85rem; color: var(--gris-texte);
}
.breadcrumb-list li { display: inline-flex; align-items: center; gap: 4px 8px; }
.breadcrumb-list li + li::before {
  content: "\203A"; /* › */
  color: var(--violet); opacity: .5; font-weight: 700;
}
.breadcrumb-list a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--gris-texte); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 1px;
}
.breadcrumb-list a:hover { color: var(--violet); border-bottom-color: var(--corail); }
.breadcrumb-list .icon { width: 1em; height: 1em; color: currentColor; }
.breadcrumb-current { color: var(--encre); font-weight: 600; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blanc); flex-direction: column; padding: 18px 24px; gap: 14px;
    box-shadow: var(--shadow); border-radius: 0 0 24px 24px;
  }
  .main-nav.open { display: flex; }
  .burger { display: block; }

  /* Header mobile : burger à gauche, logo centré, compte (icône) à droite */
  .site-header { gap: 12px; }
  .header-actions { display: contents; }
  .burger { order: -1; }
  .logo { order: 0; flex: 1; text-align: center; }
  .btn-account {
    order: 1; padding: 0; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-account .icon { width: 1.3em; height: 1.3em; }
  .btn-account-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- *
 *  Liste de courses (dans les fiches activités) — façon ticket de caisse
 * ---------------------------------------------------------------- */
.liste-courses {
  position: relative;
  margin: 46px auto 38px;
  padding: 28px 28px 24px;
  max-width: 540px;
  background: var(--blanc);
  border-radius: 0;
  box-shadow: 0 16px 34px rgba(43, 34, 55, .13);
  transform: rotate(-.4deg);
}
/* bords crantés du ticket (haut et bas) */
.liste-courses::before,
.liste-courses::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 9px;
  filter: drop-shadow(0 2px 2px rgba(43, 34, 55, .05));
}
.liste-courses::before {
  bottom: 100%;
  background: conic-gradient(from 135deg at 50% 0, var(--blanc) 0 90deg, transparent 0) 50% / 18px 100%;
}
.liste-courses::after {
  top: 100%;
  background: conic-gradient(from -45deg at 50% 100%, var(--blanc) 0 90deg, transparent 0) 50% / 18px 100%;
}
.liste-courses h2 {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.15rem;
}
.liste-courses h2 .icon {
  width: 24px; height: 24px;
  color: var(--violet);
  flex: none;
}
.liste-courses .lc-intro {
  margin: 0 0 16px;
  color: var(--gris-texte);
  font-size: .92rem;
  text-align: center;
}
.liste-courses ul.lc-items {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 2px dashed rgba(43, 34, 55, .22);
}
.liste-courses .lc-items li {
  margin: 0;
  padding: 12px 0;
  border-top: 1px dotted rgba(43, 34, 55, .28);
}
.liste-courses .lc-items li:first-child { border-top: none; padding-top: 8px; }
/* ligne "total" du ticket : chaque fiche déclare son budget via data-total
   (fourchette globale). Pas de total affiché tant que la fiche n'en donne pas. */
.liste-courses ul.lc-items[data-total]::after {
  content: "TOTAL ............... " attr(data-total);
  display: block;
  margin-top: 6px;
  padding: 12px 0 0;
  border-top: 2px dashed rgba(43, 34, 55, .22);
  font-family: ui-monospace, 'Courier New', monospace;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--encre);
}
.lc-nom {
  display: block;
  font-family: ui-monospace, 'Courier New', monospace;
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--encre);
}
/* ligne article : nom à gauche, fourchette de prix à droite */
.liste-courses .lc-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.liste-courses .lc-prix {
  flex: none;
  font-family: ui-monospace, 'Courier New', monospace;
  font-weight: 700;
  font-size: .88rem;
  white-space: nowrap;
  color: var(--violet-fonce);
}
.lc-astuce {
  display: block;
  margin-top: 3px;
  font-size: .88rem;
  color: var(--gris-texte);
}
.lc-astuce strong {
  color: var(--sauge);
  font-weight: 700;
}
.lc-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.lc-liens a {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid rgba(43, 34, 55, .25);
  color: var(--violet-fonce);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.lc-liens a:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--blanc);
}
.lc-liens .lc-fr {
  border-color: rgba(143, 188, 111, .6);
}
.lc-liens .lc-fr::after {
  content: " 🇫🇷";
  font-size: .8em;
}
.liste-courses .lc-note {
  margin: 16px 0 0;
  font-size: .85rem;
  color: var(--gris-texte);
  font-style: italic;
  text-align: center;
}
/* petit code-barres de fin de ticket */
.liste-courses .lc-note::after {
  content: "";
  display: block;
  height: 30px;
  max-width: 190px;
  margin: 16px auto 0;
  background: repeating-linear-gradient(90deg,
    var(--encre) 0 2px, transparent 2px 5px,
    var(--encre) 5px 6px, transparent 6px 9px,
    var(--encre) 9px 12px, transparent 12px 16px);
  opacity: .85;
}
@media (max-width: 620px) {
  .liste-courses { padding: 24px 18px 20px; transform: none; }
}

/* --- Quiz : bandeau de filtres + illustrations ------------------ */
.quiz-filtres { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 26px; }
.filtre-groupe { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.filtre-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--violet); min-width: 54px;
}
.quiz-media { height: 132px; }
.quiz-media img { object-fit: contain; padding: 16px; box-sizing: border-box; }

/* ----- Atelier coloriage sur mesure ----- */
.coloriage-outil { max-width: 560px; }
.coloriage-outil .form-card { margin-top: 6px; }
.coloriage-liste { list-style: none; padding: 0; margin: 10px 0 0; }
.coloriage-liste li { padding: 8px 0; border-bottom: 1px dashed rgba(43, 34, 58, .15); }
.coloriage-liste .muted { color: rgba(43, 34, 58, .55); font-size: .92rem; }

/* Intro courte sous un titre de section */
.section-intro { color: rgba(43, 34, 58, .7); max-width: 620px; margin: 6px 0 0; }
/* Maillage « on sort les crayons ? » en bas des fiches activité */
.coloriage-recos .cards { margin-top: 18px; }

/* Guides idées cadeaux */
.gift-age {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  color: var(--violet-fonce);
}
.age-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.age-nav .chip { text-decoration: none; }
.age-nav a.chip:hover { background: var(--violet-pale); }

/* Extrait affiché sous le titre sur les cartes du blog */
.card .card-excerpt {
  margin: 6px 0 0;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--gris-texte);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------- *
 *  "Pour aller plus loin" : carte lien externe (Pinterest, Instagram)
 *  La vignette est chargée dynamiquement (og:image mise en cache serveur).
 * ---------------------------------------------------------------- */
.plus-loin {
  display: flex;
  align-items: stretch;
  margin: 26px 0;
  border: 1px solid rgba(43, 34, 55, .14);
  border-radius: 16px;
  overflow: hidden;
  background: var(--blanc);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(43, 34, 55, .06);
  transition: transform .15s, box-shadow .15s;
}
.plus-loin:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(91, 46, 158, .14);
}
.plus-loin .pl-thumb {
  display: none;
  position: relative;
  flex: none;
  width: 240px;
  min-height: 160px;
  background: var(--violet-pale);
}
/* cartes vidéo (reels) : rond + triangle "play" par-dessus la vignette */
.plus-loin.pl-video.a-image .pl-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(43, 34, 55, .55);
  box-shadow: 0 2px 8px rgba(43, 34, 55, .3);
  transition: background .15s;
}
.plus-loin.pl-video.a-image:hover .pl-thumb::before {
  background: var(--violet);
}
.plus-loin.pl-video.a-image .pl-thumb::after {
  content: "";
  position: absolute;
  inset: 0 -5px 0 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 17px solid var(--blanc);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.plus-loin.a-image .pl-thumb { display: block; }
.plus-loin .pl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plus-loin .pl-body {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.plus-loin .pl-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--violet-fonce);
}
.plus-loin .pl-kicker .icon { width: 22px; height: 22px; }
.plus-loin .pl-title {
  font-weight: 700;
  color: var(--encre);
  line-height: 1.35;
}
.plus-loin .pl-note {
  font-size: .9rem;
  color: var(--gris-texte);
}
/* cartes reels transformées en embed Instagram (preview + lecture en page) */
.plus-loin.pl-embed {
  display: block;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.plus-loin.pl-embed iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  background: var(--violet-pale);
}
.plus-loin.pl-embed .pl-body {
  border-top: 1px solid rgba(43, 34, 55, .1);
}
.plus-loin.pl-embed .pl-lien {
  margin-top: 6px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plus-loin.pl-embed .pl-lien:hover { color: var(--violet-fonce); }

@media (max-width: 560px) {
  .plus-loin .pl-thumb { width: 145px; min-height: 130px; }
  .plus-loin .pl-body { padding: 13px 15px; }
}

/* ---------------------------------------------------------------- *
 *  Encart illustré vers une fiche activité
 *  Généré côté serveur à partir du marqueur <div class="fiche-ref">.
 *  Carte horizontale compacte : hero à gauche, titre + méta à droite.
 *  Utilisée dans les articles de blog et les pages anniversaire.
 * ---------------------------------------------------------------- */
.fiche-encart {
  display: flex; align-items: stretch;
  background: var(--blanc); border: 1px solid #EFE9F7; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  text-decoration: none; color: var(--encre);
  margin: 26px 0; transition: transform .18s, box-shadow .18s;
}
.fiche-encart:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43, 34, 55, .13); }
.fiche-encart-media {
  position: relative; flex: none; width: 132px; align-self: stretch;
  background: linear-gradient(135deg, var(--violet-pale), var(--corail-pale) 55%, var(--soleil-pale));
  display: flex; align-items: center; justify-content: center;
}
.fiche-encart-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fiche-encart-media .card-cat { left: 10px; top: 10px; width: 34px; height: 34px; font-size: .95rem; }
.fiche-encart-media .icon-hero { width: 46px; height: 46px; color: var(--violet); opacity: .9; }
.fiche-encart-txt {
  padding: 14px 16px; min-width: 0; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.fiche-encart-kicker {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--corail);
}
.fiche-encart-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.fiche-encart-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: .82rem; font-weight: 600; color: var(--gris-texte);
}
.fiche-encart-meta .icon { width: .95em; height: .95em; color: var(--gris-texte); vertical-align: -.15em; }
.fiche-encart-sep { color: #D8CEEA; }
.fiche-encart-go {
  flex: none; align-self: center; margin: 0 16px 0 4px;
  white-space: nowrap; font-size: .82rem; font-weight: 700; color: var(--violet);
}
@media (max-width: 520px) {
  .fiche-encart-media { width: 96px; }
  .fiche-encart-go { display: none; }
}

/* ---------------------------------------------------------------- *
 *  Galerie de vignettes vers des fiches activité
 *  Générée côté serveur depuis <div class="fiche-galerie" data-slugs="…">.
 *  Grille compacte de petites tuiles (photo + titre), posée après une
 *  liste à puces dans les articles. Plus légère que .fiche-encart.
 * ---------------------------------------------------------------- */
.fiche-galerie {
  display: grid; gap: 16px; margin: 22px 0 28px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.fiche-vignette {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid #EFE9F7; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  text-decoration: none; color: var(--encre);
  transition: transform .18s, box-shadow .18s;
}
.fiche-vignette:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43, 34, 55, .13); }
.fiche-vignette-media {
  position: relative; aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--violet-pale), var(--corail-pale) 55%, var(--soleil-pale));
  display: flex; align-items: center; justify-content: center;
}
.fiche-vignette-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fiche-vignette-media .card-cat { left: 8px; top: 8px; width: 30px; height: 30px; font-size: .85rem; }
.fiche-vignette-media .icon-hero { width: 38px; height: 38px; color: var(--violet); opacity: .9; }
.fiche-vignette-title {
  padding: 10px 12px 12px; font-family: var(--font-display);
  font-size: .98rem; font-weight: 600; line-height: 1.2;
}
@media (max-width: 520px) {
  .fiche-galerie { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
}

/* Séparateur décoratif entre deux sections : trois pastilles « crayon »
   (soleil / corail / violet) encadrées de deux traits qui s'estompent.
   Les marges négatives resserrent le double padding des sections voisines
   pour éviter les grands vides. */
.separateur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(280px, 68%);
  margin: 24px auto;
}
/* Resserre le vide seulement quand le séparateur est entre deux sections
   (padding 48px de chaque côté). Suivi d'autre chose (ex. le décompte
   d'activités), la marge du bas reste normale et rien ne se chevauche. */
.section + .separateur { margin-top: -16px; }
.separateur + .section { padding-top: 24px; }
.separateur::before,
.separateur::after {
  content: "";
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: var(--violet-pale);
}
.separateur span {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.separateur span:nth-of-type(1) { background: var(--soleil); }
.separateur span:nth-of-type(2) { background: var(--corail); transform: translateY(-3px); }
.separateur span:nth-of-type(3) { background: var(--violet); }