/* Repères Familles
   Couleurs relevées dans les visuels 3D : vert sauge, crème, bois clair, et
   une touche de terre cuite (l'arc-en-ciel). Titres en Bricolage Grotesque,
   texte en Atkinson Hyperlegible, la police dessinée pour être lisible par
   tous, enfants DYS compris. */
@font-face { font-family: "Bricolage"; src: url("/polices/bricolage.woff") format("woff"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/polices/atkinson-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/polices/atkinson-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --creme: #f8f4ec;
  --creme-fonce: #f0e9dc;
  --blanc: #fffdfa;
  --sauge: #8a997f;
  --sauge-pale: #e6ebe0;
  --sauge-fonce: #4e5f47;
  --sauge-nuit: #33402f;
  --bois: #d6c5b1;
  --bois-pale: #efe5d8;
  --terre: #c26a4a;
  --terre-fonce: #a14f30;
  --encre: #2e3529;
  --encre-douce: #5b6455;
  --ombre: 0 1px 2px rgba(46, 53, 41, 0.06), 0 18px 40px rgba(46, 53, 41, 0.08);
  --rayon: 28px;
  --titre: "Bricolage", "Avenir Next", system-ui, sans-serif;
  --texte: "Atkinson", system-ui, sans-serif;
  --large: 1200px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--texte); font-size: 1.125rem; line-height: 1.7; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sauge-fonce); text-decoration-thickness: 2px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.08; margin: 0 0 0.45em; letter-spacing: -0.015em; color: var(--encre); }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); font-weight: 800; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
.chapo { font-size: 1.2rem; color: var(--encre-douce); max-width: 34em; }
.petit { font-size: 1rem; color: var(--encre-douce); }
.centre { text-align: center; }
.centre-flex { justify-content: center; }
.etiquette { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 999px; background: var(--sauge-pale); color: var(--sauge-fonce); font-weight: 700; font-size: 0.95rem; }
.etiquette-clair { background: rgba(255, 253, 250, 0.16); color: var(--blanc); }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; background: var(--encre); color: var(--blanc); padding: 10px 16px; border-radius: 12px; z-index: 50; }
:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; border-radius: 8px; }

/* ------------------------------------------------------------- en-tête flottant */
.entete { position: sticky; top: 0; z-index: 40; padding: 12px 12px 0; }
.entete-in { max-width: var(--large); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(255, 253, 250, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(46, 53, 41, 0.06), 0 10px 30px rgba(46, 53, 41, 0.08); }
.logo { text-decoration: none; color: var(--encre); }
.marque { font-family: var(--titre); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.marque-symbole { width: auto; height: 1.85em; flex: 0 0 auto; margin: -0.3em 0; }
.nav-large { display: none; }
.nav-large a, .menu nav a { font-family: var(--titre); font-weight: 600; text-decoration: none; white-space: nowrap; padding: 9px 12px; border-radius: 999px; color: var(--encre); }
.nav-large a:hover { background: var(--sauge-pale); }
.nav-large a[aria-current="page"], .menu nav a[aria-current="page"] { background: var(--encre); color: var(--blanc); }
.entete-droite { display: flex; align-items: center; gap: 8px; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-family: var(--titre); font-weight: 700; background: var(--encre); color: var(--blanc); padding: 10px 18px; border-radius: 999px; min-height: 44px; display: flex; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 58px; background: var(--blanc); border-radius: 24px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 250px; box-shadow: var(--ombre); }
.confort-btn { all: unset; box-sizing: border-box; cursor: pointer; font-family: var(--titre); font-weight: 700; font-size: 0.98rem; padding: 8px 14px; border-radius: 999px; background: var(--sauge-pale); color: var(--sauge-nuit); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.confort-btn:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; }
.interrupteur { width: 36px; height: 22px; border-radius: 99px; background: var(--bois); position: relative; flex: 0 0 auto; transition: background 0.2s; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--blanc); transition: transform 0.2s; }
.confort-btn[aria-pressed="true"] .interrupteur { background: var(--sauge-fonce); }
.confort-btn[aria-pressed="true"] .interrupteur::after { transform: translateX(14px); }
.entete-droite > .confort-btn { display: none; white-space: nowrap; }
.menu nav .confort-btn { margin: 8px 4px 4px; justify-content: space-between; }
@media (min-width: 1200px) {
  .menu { display: none; }
  .nav-large { display: flex; gap: 2px; }
  .entete-droite > .confort-btn { display: inline-flex; }
}

/* ------------------------------------------------------------- boutons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 26px; border-radius: 999px; border: 2px solid var(--sauge-nuit); background: var(--sauge-nuit); color: var(--blanc); font-family: var(--titre); font-weight: 700; font-size: 1.08rem; text-decoration: none; cursor: pointer; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(51, 64, 47, 0.22); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-contour { background: transparent; color: var(--sauge-nuit); }
.btn-contour:hover { background: var(--sauge-nuit); color: var(--blanc); }
.btn-blanc { background: var(--blanc); color: var(--sauge-nuit); border-color: var(--blanc); }
.btn-petit { min-height: 46px; padding: 9px 18px; font-size: 1rem; }
.btn-bientot, .btn-bientot:hover { background: transparent; color: inherit; border: 2px dashed currentColor; box-shadow: none; transform: none; cursor: default; }

/* ------------------------------------------------------------- héros */
.hero { max-width: var(--large); margin: 0 auto; padding: 40px 20px 72px; display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.05fr 0.95fr; padding-top: 72px; padding-bottom: 104px; } }
.hero h1 { max-width: 14ch; }
.confiance { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--encre-douce); font-weight: 700; font-size: 1rem; }
.confiance li { display: flex; align-items: center; gap: 8px; }
.confiance li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--sauge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fffdfa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.hero-visuel { position: relative; max-width: 560px; width: 100%; justify-self: center; aspect-ratio: 1; }
.hero-rond { position: absolute; inset: 6%; border-radius: 50%; background: var(--sauge-pale); }
.hero-rond::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--bois-pale); }
.hero-img { position: relative; width: 82%; margin: 9% auto 0; filter: drop-shadow(0 30px 30px rgba(46, 53, 41, 0.14)); }
.pile { aspect-ratio: 1; }
.pile img { position: absolute; height: auto; max-width: none; }
.puce { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--blanc); border-radius: 20px; padding: 8px 14px 8px 8px; box-shadow: var(--ombre); font-size: 0.85rem; line-height: 1.25; color: var(--encre-douce); max-width: 230px; }
.puce img { width: 46px; height: 46px; border-radius: 14px; background: var(--creme); padding: 4px; }
.puce b { display: block; font-family: var(--titre); color: var(--encre); font-size: 0.98rem; }
.puce-ok { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; background: var(--sauge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fffdfa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.puce-1 { top: 4%; left: -2%; }
.puce-2 { top: 42%; right: -3%; }
.puce-3 { bottom: 4%; left: 4%; }
@media (max-width: 520px) { .puce { transform: scale(0.86); } .puce-1 { left: -4%; transform-origin: left top; } .puce-2 { right: -4%; transform-origin: right center; } .puce-3 { transform-origin: left bottom; } }
@media (prefers-reduced-motion: no-preference) {
  .js .puce { opacity: 0; translate: 0 18px; transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .pret .puce { opacity: 1; translate: 0 0; }
  .pret .puce-1 { transition-delay: 0.35s; }
  .pret .puce-2 { transition-delay: 0.6s; }
  .pret .puce-3 { transition-delay: 0.85s; }
}

/* ------------------------------------------------------------- sections */
.section { max-width: var(--large); margin: 0 auto; padding: 80px 20px; }
.section-sauge, .section-bois, .section-creme-fonce { max-width: none; border-radius: 40px; margin: 0 12px; }
.section-sauge { background: var(--sauge-pale); }
.section-bois { background: var(--bois-pale); }
.section-creme-fonce { background: var(--creme-fonce); }
.section-sauge > *, .section-bois > *, .section-creme-fonce > * { max-width: calc(var(--large) - 40px); margin-left: auto; margin-right: auto; }
.tete-section { text-align: center; margin-bottom: 40px; }
.tete-section .chapo { margin: 0 auto; }
.titre-g { margin-bottom: 24px; }

/* Deux offres */
.deux-offres { display: grid; gap: 20px; }
@media (min-width: 820px) { .deux-offres { grid-template-columns: 1fr 1fr; } }
.offre { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--encre); background: var(--blanc); border-radius: var(--rayon); padding: 30px; box-shadow: var(--ombre); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.offre:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(46, 53, 41, 0.06), 0 26px 50px rgba(46, 53, 41, 0.12); }
.offre-img { width: 150px; height: 150px; position: absolute; right: 20px; bottom: 20px; }
.offre .etiquette { align-self: flex-start; }
.offre h3 { font-size: 2rem; margin-top: 4px; }
.offre > p:not(.etiquette):not(.offre-prix) { color: var(--encre-douce); max-width: 26em; }
.offre-app .etiquette { background: var(--sauge-pale); }
.offre-print .etiquette { background: var(--bois-pale); color: #7a5a35; }
.offre-prix { font-family: var(--titre); font-weight: 800; font-size: 2.2rem; margin: auto 0 14px; padding-top: 10px; letter-spacing: -0.02em; }
.offre-prix span { display: block; font-family: var(--texte); font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--encre-douce); }
.offre-lien { font-family: var(--titre); font-weight: 700; color: var(--sauge-fonce); display: inline-flex; align-items: center; gap: 8px; }
.offre-lien::after { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--sauge-nuit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l5 5-5 5' fill='none' stroke='%23fffdfa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; transition: transform 0.2s; }
.offre:hover .offre-lien::after { transform: translateX(4px); }
@media (max-width: 600px) { .offre { padding: 24px; } .offre-img { width: 86px; height: 86px; right: 12px; top: 12px; bottom: auto; } .offre .etiquette { max-width: calc(100% - 84px); } }

/* ------------------------------------------------------------- démo interactive */
.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 900px) { .demo { grid-template-columns: 300px 1fr; gap: 32px; } }
.onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 899px) { .onglets button[role="tab"] { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 4px; font-size: 0.9rem; white-space: normal; text-align: center; line-height: 1.2; min-width: 0; width: 100%; } }
@media (min-width: 900px) { .onglets { display: flex; flex-direction: column; } }
.onglets button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 22px; background: rgba(255, 253, 250, 0.6); font-family: var(--titre); font-weight: 700; font-size: 1.08rem; white-space: nowrap; flex: 0 0 auto; min-height: 56px; transition: background 0.2s, box-shadow 0.2s; }
.onglets button img { width: 48px; height: 48px; border-radius: 14px; background: var(--creme); padding: 4px; }
.onglets button[aria-selected="true"] { background: var(--blanc); box-shadow: var(--ombre); }
.onglets button:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.ecran { background: var(--blanc); border-radius: 32px; padding: 26px; box-shadow: var(--ombre); }
@media (min-width: 900px) { .ecran { min-height: 470px; } }
@media (max-width: 520px) { .ecran { padding: 18px; border-radius: 26px; } }
.panneau-titre { font-family: var(--titre); font-weight: 800; font-size: 1.6rem; margin: 0 0 10px; letter-spacing: -0.015em; }
.panneau[hidden] { display: none; }

.rt-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rt-compte { margin: 0; font-weight: 700; color: var(--encre-douce); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rt-barre { height: 12px; background: var(--creme-fonce); border-radius: 99px; margin: 6px 0 18px; overflow: hidden; }
.rt-barre span { display: block; height: 100%; width: 0; background: var(--sauge); border-radius: 99px; transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .rt-liste { grid-template-columns: 1fr 1fr; } }
.rt-etape { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 20px; background: var(--creme); font-weight: 700; min-height: 72px; transition: background 0.25s, transform 0.15s; }
.rt-etape:hover { transform: translateY(-2px); }
.rt-etape:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.rt-img { width: 56px; height: 56px; flex: 0 0 auto; }
.rt-lib { flex: 1; line-height: 1.3; }
.rt-case { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--bois); flex: 0 0 auto; transition: background 0.25s, border-color 0.25s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.fait .rt-etape { background: var(--sauge-pale); }
.fait .rt-case { border-color: var(--sauge-fonce); transform: scale(1.1); background: var(--sauge-fonce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fffdfa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.bravo { margin: 18px 0 0; min-height: 1.7em; font-family: var(--titre); font-weight: 800; font-size: 1.3rem; color: var(--sauge-fonce); }

.emos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 640px) { .emos { grid-template-columns: repeat(9, 1fr); } }
.emo { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 18px; border: 2.5px solid transparent; text-align: center; font-size: 0.82rem; font-weight: 700; line-height: 1.2; transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.emo img { width: 64px; height: 64px; }
.emo:hover { background: var(--creme); transform: translateY(-2px); }
.emo[aria-pressed="true"] { background: var(--sauge-pale); border-color: var(--sauge-fonce); }
.emo:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.emo-choix { display: flex; align-items: center; gap: 18px; background: var(--creme); border-radius: 24px; padding: 14px 20px 14px 10px; }
.emo-grand { width: 120px; height: 120px; flex: 0 0 auto; }
.emo-nom { font-family: var(--titre); font-size: 1.5rem; font-weight: 600; margin: 0 0 4px; line-height: 1.2; }
.emo-nom b { font-weight: 800; color: var(--sauge-fonce); }
.emo-astuce { margin: 0; color: var(--encre-douce); }
.emo-choix.change .emo-grand { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pop { from { transform: scale(0.7) rotate(-6deg); opacity: 0.4; } to { transform: none; opacity: 1; } }

.minuteur { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin: 10px 0 18px; }
.cadran { width: min(240px, 70vw); height: auto; flex: 0 0 auto; }
.cadran-fond { fill: var(--creme-fonce); }
.cadran-part { fill: var(--sauge); }
.cadran-centre { fill: var(--sauge-nuit); }
.min-droite { flex: 1 1 200px; }
.min-temps { font-family: var(--titre); font-weight: 800; font-size: 4rem; line-height: 1; margin: 0 0 16px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.min-durees { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.min-durees button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 16px; border-radius: 999px; background: var(--creme); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.min-durees button[aria-pressed="true"] { background: var(--sauge-nuit); color: var(--blanc); }
.min-durees button:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.min-aide { margin: 0; color: var(--encre-douce); font-size: 1rem; }
.minuteur.fini .min-temps { color: var(--terre-fonce); }

/* ------------------------------------------------------------- outils */
.outils { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 900px) { .outils { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.outil { background: var(--blanc); border-radius: 26px; padding: 18px 18px 20px; box-shadow: var(--ombre); transition: transform 0.2s; }
.outil:hover { transform: translateY(-4px) rotate(-0.5deg); }
.outil img { width: 96px; height: 96px; margin: -4px 0 6px -6px; }
.outil h3 { font-size: 1.15rem; margin-bottom: 4px; }
.outil p { margin: 0; font-size: 0.98rem; color: var(--encre-douce); line-height: 1.5; }
.outil:nth-child(1), .outil:nth-child(6) { background: var(--sauge-pale); box-shadow: none; }
.outil:nth-child(3), .outil:nth-child(8) { background: var(--bois-pale); box-shadow: none; }
@media (max-width: 420px) { .outil { padding: 14px; } .outil img { width: 72px; height: 72px; } .outil p { font-size: 0.92rem; } }
.offre-app-bloc { display: grid; gap: 20px; align-items: center; background: var(--sauge-nuit); color: var(--blanc); border-radius: 32px; padding: 32px; }
@media (min-width: 860px) { .offre-app-bloc { grid-template-columns: 1.1fr 0.9fr; padding: 40px 48px; } }
.offre-app-bloc h3 { color: var(--blanc); font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.offre-app-bloc .petit { color: #d9dfd3; }
.offre-app-bloc .btn { background: var(--blanc); color: var(--sauge-nuit); border-color: var(--blanc); }

.coches { list-style: none; padding: 0; margin: 0 0 1.2em; }
.coches li { position: relative; padding-left: 34px; margin-bottom: 10px; }
.coches li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 24px; height: 24px; border-radius: 50%; background: var(--sauge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fffdfa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.offre-app-bloc .coches li::before, .coches-clair li::before { background-color: rgba(255, 253, 250, 0.22); }

/* ------------------------------------------------------------- parents */
.parents { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .parents { grid-template-columns: 0.8fr 1.2fr; gap: 56px; } }
.parents-visuel { background: var(--blanc); border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; max-width: 380px; width: 80%; margin: 0 auto; }
.parents-visuel img { width: 82%; }
.principes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .principes { grid-template-columns: 1fr 1fr; } }
.principes li { background: var(--blanc); border-radius: 22px; padding: 20px; }
.principes h3 { font-size: 1.15rem; margin-bottom: 4px; }
.principes p { margin: 0; color: var(--encre-douce); font-size: 1rem; }

/* ------------------------------------------------------------- Défi */
.bande-defi { background: var(--sauge-fonce); color: var(--blanc); border-radius: 40px; margin: 80px 12px 0; padding: 72px 20px; }
.bande-defi h2 { color: var(--blanc); }
.defi { max-width: calc(var(--large) - 40px); margin: 0 auto; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .defi { grid-template-columns: 0.85fr 1.15fr; gap: 72px; } }
.defi-texte > p { max-width: 32em; }
.prix { font-family: var(--titre); font-weight: 800; font-size: 2.6rem; line-height: 1; margin: 18px 0 20px; letter-spacing: -0.02em; }
.prix span { display: block; font-family: var(--texte); font-weight: 400; font-size: 1rem; letter-spacing: 0; margin-top: 6px; color: #dfe6d9; }
.deck { position: relative; width: min(320px, 90%); margin: 0 auto; padding-bottom: 78px; }
.deck-pile span { position: absolute; left: 0; right: 0; top: 0; bottom: 78px; border-radius: 26px; background: var(--bois); transform: rotate(-7deg); }
.deck-pile span + span { background: var(--terre); transform: rotate(5deg); }
.carte-defi { --teinte: var(--sauge-pale); position: relative; aspect-ratio: 4 / 5; background: var(--blanc); color: var(--encre); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); overflow: hidden; }
.carte-defi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; background: var(--teinte); transition: background 0.3s; }
.carte-defi > * { position: relative; }
.cd-num { font-family: var(--titre); font-weight: 700; margin: 0; }
.cd-titre { font-family: var(--titre); font-weight: 800; font-size: clamp(2rem, 8vw, 2.5rem); line-height: 1; letter-spacing: -0.015em; margin: 0; padding-top: 30%; }
.cd-defi { font-size: 1.05rem; margin: 12px 0 0; }
.cd-pied { margin: auto 0 0; padding-top: 12px; font-size: 0.85rem; color: var(--encre-douce); }
.deck-btn { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; }
.deck-btn:hover { transform: translate(-50%, -2px); }
.carte-defi.sortie { transform: translateX(-40px) rotate(-10deg); opacity: 0; transition: transform 0.24s ease-in, opacity 0.24s ease-in; }
.carte-defi.entree { animation: pioche 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
@keyframes pioche { from { transform: translateY(30px) rotate(6deg) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------- téléchargements, articles */
.deux-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .deux-col { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } }
.dl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl { display: grid; gap: 10px 18px; align-items: center; background: var(--blanc); border-radius: 22px; padding: 18px 20px; }
@media (min-width: 640px) { .dl { grid-template-columns: 1fr auto; } }
.dl-format { grid-column: 1 / -1; justify-self: start; background: var(--sauge-pale); color: var(--sauge-fonce); border-radius: 999px; padding: 2px 12px; font-weight: 700; font-size: 0.85rem; }
.dl-texte h3 { margin-bottom: 2px; font-size: 1.15rem; }
.dl-texte p { margin: 0; color: var(--encre-douce); font-size: 1rem; }
.dl .btn { justify-self: start; }
.dl-poids { font-family: var(--texte); font-weight: 400; font-size: 0.85rem; opacity: 0.85; }
.articles { display: grid; gap: 16px; }
@media (min-width: 860px) { .articles { grid-template-columns: repeat(3, 1fr); } }
.article-carte { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--encre); background: var(--blanc); border-radius: 26px; padding: 24px; box-shadow: var(--ombre); transition: transform 0.2s; }
.article-carte:hover { transform: translateY(-4px); }
.la-cat { font-weight: 700; color: var(--terre-fonce); font-size: 0.95rem; margin: 0; }
.la-titre { font-family: var(--titre); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.la-desc { color: var(--encre-douce); flex: 1; font-size: 1rem; }
.lire { font-family: var(--titre); font-weight: 700; color: var(--sauge-fonce); }

/* ------------------------------------------------------------- FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.q { background: var(--blanc); border-radius: 22px; padding: 4px 22px; }
.q summary { list-style: none; cursor: pointer; font-family: var(--titre); font-weight: 700; font-size: 1.15rem; padding: 16px 40px 16px 0; position: relative; }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--sauge-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='%234e5f47' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat; transition: transform 0.25s; }
.q[open] summary::after { transform: rotate(45deg); }
.q p { color: var(--encre-douce); margin: 0 0 18px; }

/* ------------------------------------------------------------- final */
.final { max-width: 900px; margin: 0 auto; padding: 96px 20px; text-align: center; }
.final-plante { width: 150px; margin: 0 auto 6px; }
.final h2 { font-size: clamp(2rem, 5vw, 3.2rem); }

/* ------------------------------------------------------------- pages intérieures */
.tete-page { max-width: var(--large); margin: 0 auto; padding: 48px 20px 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.tete-page > div { flex: 1 1 380px; }
.tete-img { width: 170px; margin: 0 auto; }
@media (min-width: 700px) { .tete-img { width: 220px; margin: 0; } }
.bientot { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; background: var(--blanc); border-radius: 32px; padding: 28px; margin-bottom: 56px; box-shadow: var(--ombre); }
.bientot-img { width: 140px; }
.bientot > div { flex: 1 1 280px; }
.bientot p:last-child { margin: 0; color: var(--encre-douce); }
.etapes { list-style: none; counter-reset: et; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; }
@media (min-width: 800px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etapes li { counter-increment: et; background: var(--blanc); border-radius: 26px; padding: 24px; }
.etapes li::before { content: counter(et); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sauge-pale); font-family: var(--titre); font-weight: 800; font-size: 1.3rem; color: var(--sauge-fonce); margin-bottom: 12px; }
.etapes p { margin: 0; color: var(--encre-douce); }
.tete-article { max-width: 820px; margin: 0 auto; padding: 48px 20px 0; }
.tete-article h1 { font-size: clamp(2.1rem, 5.6vw, 3.4rem); }
.retour { display: table; font-weight: 700; margin-bottom: 16px; }
.retour::before { content: "‹ "; }
.prose { max-width: 720px; margin: 0 auto; padding: 36px 20px 64px; }
.prose h1 { font-size: clamp(2.1rem, 5.6vw, 3.2rem); }
.prose h2 { font-size: 1.7rem; margin-top: 1.5em; }
.prose ul:not(.coches), .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.5em; }
.histoire .grand { font-family: var(--titre); font-weight: 700; font-size: 1.8rem; line-height: 1.2; }
.signature { font-family: var(--titre); font-weight: 800; font-size: 2rem; color: var(--sauge-fonce); }
.encart { max-width: 760px; margin: 0 auto 72px; background: var(--sauge-pale); border-radius: 30px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
@media (max-width: 800px) { .encart { margin: 0 12px 56px; } }
.encart-img { width: 110px; }
.encart > div { flex: 1 1 260px; }
.encart h2 { font-size: 1.5rem; }

/* ------------------------------------------------------------- pied de page */
.pied { background: var(--sauge-nuit); color: var(--creme); margin: 0 12px 12px; border-radius: 40px; padding: 56px 24px 28px; }
.pied a { color: var(--blanc); }
.pied-in { max-width: calc(var(--large) - 40px); margin: 0 auto; }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.pied-marque { font-size: 1.6rem; margin: 0 0 10px; }
.pied-marque .marque { font-size: 1.8rem; }
.pied-phrase { font-family: var(--titre); font-weight: 600; font-size: 1.25rem; max-width: 26em; }
.pied-plante { width: 120px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 10px 48px; border-top: 1px solid rgba(248, 244, 236, 0.2); margin-top: 28px; padding-top: 22px; }
.pied-liens ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pied-liens a { text-decoration: none; font-weight: 700; }
.pied-liens a:hover { text-decoration: underline; }
.pied-copy { margin: 22px 0 0; font-size: 0.92rem; color: #cfd6c9; }

/* ------------------------------------------------------------- lecture confort */
html.confort body { font-size: 1.28rem; line-height: 1.95; letter-spacing: 0.035em; word-spacing: 0.12em; }
html.confort h1, html.confort h2, html.confort h3, html.confort .cd-titre, html.confort .panneau-titre { letter-spacing: 0.01em; line-height: 1.18; }
html.confort .chapo { font-size: 1.3rem; }
html.confort *, html.confort *::before, html.confort *::after { transition: none !important; animation: none !important; }
html.confort .puce { opacity: 1 !important; translate: 0 0 !important; }
html.confort .deck-pile span { transform: none; }

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

/* ============================================================= MOTION DESIGN
   Tout mouvement répond à une action : le défilement ou un clic. Rien ne
   tourne en boucle. Désactivé par « Lecture confort » et par le réglage
   « réduire les animations » (la classe .mouvement n'est alors jamais posée). */

/* Barre de progression de lecture */
.progression { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none; }
.progression span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sauge), var(--terre)); transform-origin: 0 50%; transform: scaleX(0); }

/* En-tête qui se resserre au défilement */
.entete-in { transition: padding 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.entete.compact .entete-in { padding-top: 6px; padding-bottom: 6px; background: rgba(255, 253, 250, 0.94); }

/* Apparitions au défilement */
.mouvement [data-revele] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.mouvement [data-revele].vu { opacity: 1; transform: none; }
.mouvement .offre[data-revele] { transform: translateY(40px) scale(0.97); }
.mouvement .offre[data-revele].vu { transform: none; }
.mouvement .offre[data-revele] .offre-img { transform: translateY(20px) rotate(-8deg); opacity: 0; transition: transform 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) 0.25s, opacity 0.6s ease 0.25s; }
.mouvement .offre[data-revele].vu .offre-img { transform: none; opacity: 1; }
.mouvement .parents-visuel[data-revele] { transform: scale(0.85); }
.mouvement .parents-visuel[data-revele].vu { transform: none; }
.mouvement .final[data-revele] .final-plante { transform: translateY(40px) scale(0.6); transition: transform 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s; }
.mouvement .final[data-revele].vu .final-plante { transform: none; }

/* Héros : titre mot à mot, visuel qui s'installe, profondeur au défilement */
.mouvement .hero h1 .mot { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(3deg); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--m) * 45ms); }
.mouvement.pret .hero h1 .mot { opacity: 1; transform: none; }
.mouvement .hero-rond { transform: scale(0.6); opacity: 0; transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease; }
.mouvement.pret .hero-rond { transform: scale(1); opacity: 1; }
.mouvement.pret .hero-img { transform: translateY(calc(var(--sy, 0) * -0.12px)); }
@media (min-width: 960px) {
  .mouvement.pret .puce-1 { transform: translateY(calc(var(--sy, 0) * -0.22px)); }
  .mouvement.pret .puce-2 { transform: translateY(calc(var(--sy, 0) * -0.32px)); }
  .mouvement.pret .puce-3 { transform: translateY(calc(var(--sy, 0) * -0.18px)); }
}

/* Les huit outils défilent à l'horizontale pendant qu'on descend (grand écran) */
@media (min-width: 1000px) {
  .mouvement .outils-scene { height: var(--scene-h, auto); margin-bottom: 32px; }
  .mouvement .outils-collant { position: sticky; top: max(96px, calc(50vh - 300px)); overflow: visible; }
  .mouvement .outils-collant .tete-section { margin-bottom: 28px; }
  .mouvement .outils { display: flex; gap: 22px; width: max-content; margin: 0; transform: translateX(var(--piste-x, 0px)); will-change: transform; }
  .mouvement .outil { width: 300px; flex: 0 0 auto; padding: 26px; }
  .mouvement .outil img { width: 140px; height: 140px; }
  .mouvement .outil h3 { font-size: 1.35rem; }
  .mouvement .outils-scene .outil[data-revele] { opacity: 1; transform: none; }
}

/* Routine terminée : petite fête, une seule fois */
.fete-zone { position: relative; }
.bravo.fete::before, .bravo.fete::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; }
.mouvement #p-routine.fete .rt-barre span { animation: brille 0.9s ease; }
@keyframes brille { 50% { filter: brightness(1.25); } }
.confettis { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.confettis i { position: absolute; width: 10px; height: 10px; border-radius: 3px; animation: confetti 1.1s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes confetti { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
#p-routine { position: relative; }

/* Le paquet du Défi s'ouvre en éventail à l'arrivée */
.mouvement .deck .deck-pile span { transition: transform 0.9s cubic-bezier(0.3, 1.4, 0.5, 1); transform: rotate(0deg); }
.mouvement .deck.vu .deck-pile span { transform: rotate(-7deg); }
.mouvement .deck.vu .deck-pile span + span { transform: rotate(5deg); }

/* Page produit et boutique */
.section-serre { padding-top: 40px; }
.produits { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 18px; }
@media (min-width: 900px) { .produits { grid-template-columns: 1fr 1fr; } .produit-phare { grid-column: 1 / -1; } }
.produit { background: var(--blanc); border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre); display: flex; flex-direction: column; align-items: flex-start; }
.produit h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.produit h2 a { color: inherit; text-decoration: none; }
.produit > p:not(.etiquette):not(.prix-sombre) { color: var(--encre-douce); }
.produit-img { width: 120px; height: 120px; margin-bottom: 8px; }
.produit .btn { margin-top: auto; }
.produit-phare { display: grid; gap: 28px; align-items: center; background: var(--sauge-pale); box-shadow: none; }
@media (min-width: 900px) { .produit-phare { grid-template-columns: 0.9fr 1.1fr; padding: 40px; } }
.produit-phare .btn { margin-top: 0; }
.produit-visuel { position: relative; display: block; height: 260px; }
.pv-carte { position: absolute; top: 50%; left: 50%; width: 170px; aspect-ratio: 4 / 5; background: var(--blanc); border-radius: 22px; box-shadow: var(--ombre); display: grid; place-items: center; transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.pv-carte img { width: 78%; }
.pv-1 { transform: translate(-50%, -50%) translateX(-90px) rotate(-12deg); }
.pv-2 { transform: translate(-50%, -50%) translateX(90px) rotate(10deg); }
.pv-3 { transform: translate(-50%, -50%); z-index: 1; }
.produit-phare:hover .pv-1 { transform: translate(-50%, -50%) translateX(-120px) rotate(-18deg); }
.produit-phare:hover .pv-2 { transform: translate(-50%, -50%) translateX(120px) rotate(16deg); }
.mouvement .produit-phare[data-revele] .pv-1, .mouvement .produit-phare[data-revele] .pv-2 { transform: translate(-50%, -50%); }
.mouvement .produit-phare[data-revele].vu .pv-1 { transform: translate(-50%, -50%) translateX(-90px) rotate(-12deg); transition-delay: 0.3s; }
.mouvement .produit-phare[data-revele].vu .pv-2 { transform: translate(-50%, -50%) translateX(90px) rotate(10deg); transition-delay: 0.3s; }
@media (max-width: 420px) { .pv-carte { width: 130px; } .pv-1 { transform: translate(-50%, -50%) translateX(-70px) rotate(-12deg); } .pv-2 { transform: translate(-50%, -50%) translateX(70px) rotate(10deg); } }
.etiquette-bois { background: var(--bois-pale); color: #7a5a35; }
.prix-sombre { font-family: var(--titre); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.02em; margin: 4px 0 16px; }
.rassure { font-size: 0.95rem; color: #dfe6d9; margin-top: 12px; }
.rassure-sombre { font-size: 0.98rem; color: var(--encre-douce); margin-top: 12px; }
.btn-contour-clair { background: transparent; color: var(--blanc); border-color: rgba(255, 253, 250, 0.6); }
.btn-contour-clair:hover { background: var(--blanc); color: var(--sauge-nuit); }
.garanties { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .garanties { grid-template-columns: repeat(3, 1fr); } }
.garanties li { background: var(--blanc); border-radius: 22px; padding: 18px 20px 18px 62px; position: relative; color: var(--encre-douce); font-size: 1rem; }
.garanties li::before { content: ""; position: absolute; left: 18px; top: 20px; width: 30px; height: 30px; border-radius: 50%; background: var(--sauge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fffdfa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.garanties b { display: block; font-family: var(--titre); color: var(--encre); font-size: 1.1rem; }
.fiche { max-width: var(--large); margin: 0 auto; padding: 48px 20px 40px; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .fiche { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }
.fiche-visuel { background: var(--sauge-fonce); border-radius: 40px; padding: 48px 20px 32px; }
.fiche-visuel .deck-btn { background: var(--blanc); color: var(--sauge-nuit); border-color: var(--blanc); }
.fiche h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
.kit-liste { list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .kit-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .kit-liste { grid-template-columns: repeat(4, 1fr); } }
.kit-liste li { background: var(--blanc); border-radius: 26px; padding: 22px; }
.kit-liste img { width: 96px; height: 96px; margin-bottom: 6px; }
.kit-liste h3 { font-size: 1.2rem; margin-bottom: 4px; }
.kit-liste p { margin: 0; color: var(--encre-douce); font-size: 1rem; }
.principes-blancs li { background: var(--blanc); }
.merci { max-width: 760px; margin: 0 auto; padding: 72px 20px 96px; text-align: center; }
.merci-img { width: 170px; margin: 0 auto 10px; }
.merci .chapo { margin: 0 auto 24px; }

/* =============================================================== LE COIN DES ENFANTS
   Une page pour l'enfant lui-même : grosses zones à toucher (80 px et plus),
   une consigne à la fois, des images avant les mots, tout lisible à voix haute. */
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sur l'accueil du site : l'entrée vers le coin des enfants */
.ce-cta { max-width: 1040px; margin: 40px auto 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 24px; padding: 22px 28px; border-radius: var(--rayon); background: var(--sauge-nuit); color: var(--blanc); text-decoration: none; box-shadow: var(--ombre); transition: transform 0.2s; }
.ce-cta:hover { transform: translateY(-3px); }
.ce-cta img { width: 96px; height: 96px; grid-row: span 2; }
.ce-cta b { display: block; font-family: var(--titre); font-size: 1.35rem; margin-bottom: 2px; }
.ce-cta .btn { justify-self: start; }
@media (min-width: 860px) { .ce-cta { grid-template-columns: auto 1fr auto; } .ce-cta img { grid-row: auto; } }
@media (max-width: 520px) { .ce-cta { grid-template-columns: 1fr; text-align: left; } .ce-cta img { width: 72px; height: 72px; grid-row: auto; } }

body.enfant { background: var(--creme); }
.ce-barre { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); background: rgba(248, 244, 236, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.ce-parents { position: relative; overflow: hidden; display: inline-flex; align-items: center; min-height: 52px; padding: 6px 18px; border-radius: 999px; border: 2px solid var(--bois); background: var(--blanc); color: var(--encre-douce); text-decoration: none; font-family: var(--titre); font-weight: 700; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.ce-parents-txt { position: relative; display: flex; flex-direction: column; line-height: 1.15; }
.ce-parents small { font-family: var(--texte); font-weight: 400; font-size: 0.78rem; }
.ce-parents-jauge { position: absolute; inset: 0; background: var(--bois-pale); transform: scaleX(0); transform-origin: left; }
.ce-parents.tient .ce-parents-jauge { transform: scaleX(1); transition: transform 1.5s linear !important; }
.mouvement .ce-parents.rappel { animation: secoue 0.45s; }
@keyframes secoue { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

.ce-etoiles { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 12px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre); font-family: var(--titre); font-size: 1.5rem; font-weight: 800; color: var(--encre); }
.ce-etoiles svg { width: 34px; height: 34px; fill: #e6a93a; stroke: #b9801c; stroke-width: 1; stroke-linejoin: round; }
.mouvement .ce-etoiles.gagne { animation: gagne 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes gagne { 40% { transform: scale(1.25) rotate(-4deg); } }

.ce-son { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 16px; border-radius: 999px; border: 2px solid var(--sauge); background: var(--blanc); color: var(--sauge-nuit); font: 700 1rem var(--titre); cursor: pointer; }
.ce-son svg, .ce-ecouter svg, .ce-retour svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ce-son .hp, .ce-ecouter svg path:first-child { fill: currentColor; }
.ce-son .coupe { display: none; }
.ce-son[aria-pressed="false"] { border-color: var(--bois); color: var(--encre-douce); }
.ce-son[aria-pressed="false"] .onde { display: none; }
.ce-son[aria-pressed="false"] .coupe { display: inline; }
.sans-voix .ce-son, .sans-voix .ce-ecouter { display: none; }
@media (max-width: 480px) { .ce-son span, .ce-parents small { display: none; } .ce-son { padding: 6px 12px; } }

.ce { max-width: 1040px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px)); }
.ce-vue { position: relative; padding-top: 12px; }
.mouvement .ce-vue.arrive { animation: arrive 0.4s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes arrive { from { opacity: 0; transform: translateY(18px); } }

.ce-titre { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 26px; text-align: center; }
.ce-titre h1 { margin: 0; font-size: clamp(1.9rem, 5.4vw, 3.1rem); text-wrap: balance; }
.ce-titre h1:focus { outline: none; }
.ce-ecouter { flex: 0 0 auto; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--sauge-pale); color: var(--sauge-nuit); cursor: pointer; transition: transform 0.15s; }
.ce-ecouter:active { transform: scale(0.92); }

.ce-retour { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 18px 6px 14px; border-radius: 999px; border: 0; background: var(--blanc); box-shadow: var(--ombre); color: var(--encre); font: 700 1.05rem var(--titre); cursor: pointer; }

/* Les grandes tuiles */
.ce-tuiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .ce-tuiles-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 700px) { .ce-tuiles-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px) { .ce-tuiles-3 { grid-template-columns: 1fr; } .ce-tuiles-3 .ce-tuile { flex-direction: row; justify-content: flex-start; min-height: 120px; text-align: left; } .ce-tuiles-3 .ce-tuile img { width: 96px; height: 96px; } }
.ce-tuile { width: 100%; height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 14px; border: 0; border-radius: 32px; font: 800 clamp(1.15rem, 2.6vw, 1.45rem)/1.15 var(--titre); color: var(--encre); text-align: center; cursor: pointer; box-shadow: 0 6px 0 rgba(46, 53, 41, 0.12), var(--ombre); transition: transform 0.15s, box-shadow 0.15s; }
.ce-tuile:hover { transform: translateY(-3px); }
.ce-tuile:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(46, 53, 41, 0.12); }
.ce-tuile img { width: min(140px, 30vw); height: auto; }
.mouvement .ce-tuile:hover img { animation: sautille 0.5s; }
@keyframes sautille { 40% { transform: translateY(-8px) rotate(-3deg); } }
.ce-tuile small { font: 700 0.95rem var(--texte); color: var(--encre-douce); }
.ce-sauge { background: var(--sauge-pale); }
.ce-bois { background: var(--bois-pale); }
.ce-terre { background: #f3ddd2; }
.ce-nuit { background: var(--sauge-nuit); color: var(--blanc); }

/* Routine pas à pas */
.ce-fil { list-style: none; margin: 18px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.ce-fil li { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--blanc); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bois-pale); transition: transform 0.2s; }
.ce-fil img { width: 42px; height: 42px; }
.ce-fil li.fait img { opacity: 0.35; }
.ce-fil li.fait::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--sauge-fonce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fffdfa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.ce-fil li.ici { box-shadow: 0 0 0 4px var(--terre); transform: scale(1.12); }
.ce-etape { margin: 22px auto 0; max-width: 620px; padding: 22px 22px 8px; border-radius: 36px; background: var(--blanc); box-shadow: var(--ombre); text-align: center; }
.mouvement .ce-etape.entre { animation: entre 0.45s cubic-bezier(0.25, 1.4, 0.5, 1); }
@keyframes entre { from { opacity: 0; transform: translateX(40px) scale(0.96); } }
.ce-etape-num { margin: 0; font-weight: 700; color: var(--encre-douce); }
.ce-etape-num:focus { outline: none; }
.ce-etape-img { width: min(280px, 64vw); height: auto; margin: 6px auto 0; }
.ce-titre-etape { margin: 6px 0 14px; }
.ce-consigne { margin: 0; font: 800 clamp(1.7rem, 5vw, 2.4rem)/1.12 var(--titre); color: var(--encre); text-wrap: balance; }
.ce-fait { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 620px; min-height: 88px; margin: 20px auto 0; border: 0; border-radius: 999px; background: var(--sauge-fonce); color: var(--blanc); font: 800 1.7rem var(--titre); cursor: pointer; box-shadow: 0 7px 0 var(--sauge-nuit); transition: transform 0.12s, box-shadow 0.12s; }
.ce-fait:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--sauge-nuit); }
.ce-fait svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ce-fait-petit { min-height: 76px; font-size: 1.45rem; max-width: 340px; }

/* Émotions */
.ce-emos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-emo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 0; border-radius: 26px; background: var(--blanc); box-shadow: var(--ombre); font: 700 clamp(0.95rem, 2.4vw, 1.2rem)/1.15 var(--titre); color: var(--encre); cursor: pointer; transition: transform 0.15s, background 0.15s; }
.ce-emo:hover { background: var(--sauge-pale); transform: translateY(-3px); }
.ce-emo img { width: min(120px, 22vw); height: auto; }
.ce-emo-grand { display: grid; gap: 18px 36px; align-items: center; margin-top: 18px; padding: 26px; border-radius: 36px; background: var(--blanc); box-shadow: var(--ombre); }
.ce-emo-grand > img { width: min(300px, 62vw); height: auto; margin: 0 auto; }
@media (min-width: 760px) { .ce-emo-grand { grid-template-columns: auto 1fr; padding: 36px 44px; } }
.ce-emo-nom { margin: 0 0 6px; font: 700 1.25rem var(--titre); color: var(--encre-douce); }
.ce-emo-nom:focus { outline: none; }
.ce-emo-nom b { display: block; font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--encre); line-height: 1.05; }
.ce-emo-grand .ce-titre { justify-content: flex-start; text-align: left; }
.ce-astuce { margin: 0; font-size: clamp(1.25rem, 3vw, 1.55rem); line-height: 1.4; }
.ce-choix { display: flex; flex-wrap: wrap; gap: 12px; }
.ce-choix-centre { justify-content: center; }
.ce-gros { display: inline-flex; align-items: center; gap: 10px; min-height: 76px; padding: 8px 24px 8px 10px; border-radius: 999px; border: 0; background: var(--sauge-pale); color: var(--encre); font: 800 1.25rem var(--titre); cursor: pointer; box-shadow: 0 5px 0 rgba(46, 53, 41, 0.14); transition: transform 0.12s; }
.ce-gros img { width: 58px; height: 58px; }
.ce-gros:active { transform: translateY(4px); }
.ce-gros-nuit { background: var(--sauge-nuit); color: var(--blanc); box-shadow: 0 5px 0 var(--encre); }

/* Minuteur */
.ce-minuteur { display: grid; justify-items: center; gap: 22px 48px; align-items: center; }
@media (min-width: 820px) { .ce-minuteur { grid-template-columns: auto auto; justify-content: center; } }
.ce-cadran { width: min(340px, 82vw); height: auto; filter: drop-shadow(0 10px 22px rgba(46, 53, 41, 0.12)); }
.ce-cadran-bord { fill: var(--blanc); }
.ce-cadran-fond { fill: var(--creme-fonce); }
.ce-cadran-part { fill: var(--terre); }
.ce-cadran-centre { fill: var(--blanc); stroke: var(--terre-fonce); stroke-width: 4; }
.ce-min-cote { display: grid; justify-items: center; gap: 16px; }
.ce-min-temps { margin: 0; font: 800 clamp(3.2rem, 11vw, 4.6rem)/1 var(--titre); font-variant-numeric: tabular-nums; color: var(--encre); }
.fini .ce-min-temps { color: var(--terre-fonce); }
.mouvement .fini .ce-cadran { animation: gagne 0.8s 2; }
.ce-durees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(400px, 100%); }
.ce-durees button { min-height: 64px; border-radius: 20px; border: 3px solid transparent; background: var(--blanc); box-shadow: var(--ombre); font: 800 1.15rem var(--titre); color: var(--encre); cursor: pointer; }
.ce-durees button[aria-pressed="true"] { border-color: var(--terre); background: #f3ddd2; }
.en-cours .ce-durees { opacity: 0.5; }

/* Respiration */
.ce-respire { display: grid; justify-items: center; gap: 10px; }
.ce-bulle { width: min(380px, 86vw); aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; }
.ce-bulle span { width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--blanc), var(--sauge-pale) 45%, var(--sauge) 100%); box-shadow: 0 18px 50px rgba(78, 95, 71, 0.3); transition: transform 5s ease-in-out, background 1s; }
.ce-bulle.gonfle span { transform: scale(2.2); transition-duration: 4s; }
.ce-souffle { margin: 0; font: 800 clamp(1.7rem, 5vw, 2.4rem) var(--titre); color: var(--encre); min-height: 1.3em; text-align: center; }
.ce-tour { margin: 0; color: var(--encre-douce); font-weight: 700; }

/* Bravo */
.ce-vue-bravo { text-align: center; padding-top: 24px; overflow: visible; }
.ce-bravo-img { width: min(260px, 60vw); margin: 0 auto; }
.mouvement .ce-vue-bravo.arrive .ce-bravo-img { animation: pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ce-vue-bravo h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.ce-vue-bravo h1:focus { outline: none; }
.ce-bravo-txt { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; padding: 10px 24px 10px 14px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre); font: 800 1.6rem var(--titre); }
.ce-bravo-txt svg { width: 40px; height: 40px; fill: #e6a93a; stroke: #b9801c; stroke-width: 1; }
@media (max-width: 480px) { .ce-fil { gap: 6px; } .ce-fil li { width: 46px; height: 46px; } .ce-fil img { width: 34px; height: 34px; } .ce-fil li.fait::after { width: 20px; height: 20px; background-size: 15px; } }

/* ---------------------------------------------------- coin des enfants : version ludique */
body.enfant {
  --soleil: #e6a93a;
  --soleil-pale: #f9e9c2;
  --ciel-pale: #dce9ea;
  --terre-pale: #f3ddd2;
  background:
    radial-gradient(circle at 8% 18%, rgba(230, 169, 58, 0.16) 0 120px, transparent 121px),
    radial-gradient(circle at 94% 32%, rgba(138, 153, 127, 0.18) 0 160px, transparent 161px),
    radial-gradient(circle at 12% 88%, rgba(194, 106, 74, 0.12) 0 140px, transparent 141px),
    radial-gradient(circle at 88% 92%, rgba(220, 233, 234, 0.9) 0 180px, transparent 181px),
    var(--creme);
  background-attachment: fixed;
}
.ce-coucou { margin: 4px auto -6px; width: fit-content; padding: 6px 18px; border-radius: 999px; background: var(--soleil); color: var(--encre); font: 800 1.15rem var(--titre); transform: rotate(-4deg); box-shadow: 0 4px 0 #b9801c; }
.mouvement .ce-vue.arrive .ce-coucou { animation: coucou 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s backwards; }
@keyframes coucou { from { transform: rotate(-4deg) scale(0); } }
.ce-surligne { position: relative; white-space: nowrap; color: var(--terre-fonce); }
.ce-surligne::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.16em; height: 0.32em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c14-8 22 4 36-3s22 5 38-2 24 4 42-2' fill='none' stroke='%23e6a93a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* Tuiles plus gaies, légèrement de travers comme des cartes posées */
.ce-bois { background: var(--soleil-pale); }
.ce-tuiles-4 li:nth-child(odd) .ce-tuile { transform: rotate(-1.5deg); }
.ce-tuiles-4 li:nth-child(even) .ce-tuile { transform: rotate(1.5deg); }
.ce-tuiles-4 .ce-tuile:hover { transform: rotate(0) translateY(-4px) scale(1.02); }
.ce-tuiles-4 .ce-tuile:active, .ce-tuile:active { transform: scale(0.95) translateY(4px); }
.mouvement .ce-vue.arrive .ce-tuiles li { animation: tombe 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.mouvement .ce-vue.arrive .ce-tuiles li:nth-child(2) { animation-delay: 0.07s; }
.mouvement .ce-vue.arrive .ce-tuiles li:nth-child(3) { animation-delay: 0.14s; }
.mouvement .ce-vue.arrive .ce-tuiles li:nth-child(4) { animation-delay: 0.21s; }
@keyframes tombe { from { opacity: 0; transform: translateY(-30px) scale(0.85); } }
.ce-emos li:nth-child(3n+1) .ce-emo { background: var(--blanc); }
.ce-emos li:nth-child(3n+2) .ce-emo { background: #fffaf0; }
.mouvement .ce-emo.tremousse img { animation: tremousse 0.38s; }
@keyframes tremousse { 20% { transform: rotate(-12deg) scale(1.1); } 45% { transform: rotate(10deg) scale(1.15); } 70% { transform: rotate(-6deg) scale(1.1); } }

/* Bouton de l'album, sur l'accueil */
.ce-album-btn { width: 100%; margin-top: 20px; display: flex; align-items: center; gap: 18px; padding: 16px 22px; border: 3px dashed var(--soleil); border-radius: 32px; background: var(--blanc); color: var(--encre); cursor: pointer; text-align: left; box-shadow: var(--ombre); transition: transform 0.15s; }
.ce-album-btn:active { transform: scale(0.97); }
.ce-album-pile { display: flex; flex: 0 0 auto; }
.ce-album-pile img, .ce-album-pile i { width: 66px; height: 66px; margin-left: -18px; border-radius: 50%; background: var(--soleil-pale); padding: 4px; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 3px 4px rgba(46, 53, 41, 0.18)); }
.ce-album-pile img:first-child, .ce-album-pile i:first-child { margin-left: 0; transform: rotate(-8deg); }
.ce-album-pile img:last-child, .ce-album-pile i:last-child { transform: rotate(8deg); }
.ce-album-pile i { display: block; background: var(--creme-fonce); border: 2px dashed var(--bois); }
.ce-album-txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ce-album-txt b { font: 800 1.3rem/1.15 var(--titre); }
.ce-album-txt small { font-size: 0.95rem; color: var(--encre-douce); }
.ce-jauge { display: block; height: 14px; border-radius: 99px; background: var(--creme-fonce); overflow: hidden; }
.ce-jauge i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--soleil), var(--terre)); transition: width 0.8s; }
@media (max-width: 480px) { .ce-album-pile img, .ce-album-pile i { width: 52px; height: 52px; } .ce-album-btn { gap: 12px; padding: 14px 16px; } }

/* L'album : de vrais autocollants, avec leur bord blanc découpé */
.ce-album-info { text-align: center; margin: -12px 0 20px; font-size: 1.15rem; color: var(--encre-douce); }

/* Routine : le tampon « Super ! » et l'étoile qui s'envole */
.ce-etape { position: relative; overflow: hidden; }
.ce-tampon { position: absolute; z-index: 2; left: 50%; top: 38%; display: flex; align-items: center; gap: 8px; padding: 10px 26px 10px 16px; border-radius: 22px; border: 5px solid var(--sauge-fonce); background: rgba(255, 253, 250, 0.94); color: var(--sauge-fonce); font: 800 2.4rem var(--titre); transform: translate(-50%, -50%) rotate(-10deg) scale(0); opacity: 0; pointer-events: none; }
.ce-tampon svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.valide .ce-tampon { animation: tampon 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
.valide .ce-etape-img { opacity: 0.4; transition: opacity 0.2s; }
@keyframes tampon { 0% { transform: translate(-50%, -50%) rotate(-25deg) scale(2.2); opacity: 0; } 55% { transform: translate(-50%, -50%) rotate(-10deg) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-10deg) scale(1); opacity: 1; } }
.ce-vol { position: fixed; z-index: 60; width: 48px; height: 48px; pointer-events: none; }
.ce-vol svg { width: 100%; height: 100%; fill: var(--soleil); stroke: #b9801c; stroke-width: 1; filter: drop-shadow(0 0 8px rgba(230, 169, 58, 0.7)); }
.mouvement .ce-fil li.fait { animation: gagne 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }

/* Respiration : la bulle change de couleur, de petites bulles s'envolent */
.ce-bulle { position: relative; }
.ce-bulle.gonfle span { background: radial-gradient(circle at 35% 30%, var(--blanc), var(--sauge-pale) 40%, var(--sauge) 100%); }
.ce-bulle:not(.gonfle) span { background: radial-gradient(circle at 35% 30%, var(--blanc), var(--ciel-pale) 45%, #9fbfc4 100%); }
.ce-mini { position: absolute; bottom: 30%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(220, 233, 234, 0.7) 60%, rgba(159, 191, 196, 0.6)); border: 1px solid rgba(255, 255, 255, 0.9); pointer-events: none; animation: monte 2.6s ease-out forwards; }
@keyframes monte { from { transform: translate(0, 0) scale(0.4); opacity: 0; } 15% { opacity: 1; } to { transform: translate(var(--x), -260px) scale(1); opacity: 0; } }

/* Bravo : la carte de l'autocollant se retourne */
.ce-nouveau { margin: -6px auto 24px; display: grid; justify-items: center; gap: 6px; }
.ce-nouveau p { margin: 0; padding: 4px 16px; border-radius: 999px; background: var(--soleil); font: 800 1.2rem var(--titre); transform: rotate(-3deg); }
.ce-nouveau-carte { width: 170px; height: 170px; display: grid; place-items: center; border-radius: 30px; background: radial-gradient(circle, #fff 0 45%, var(--soleil-pale) 46% 100%); box-shadow: 0 0 0 6px var(--blanc), 0 14px 30px rgba(230, 169, 58, 0.35); }
.ce-nouveau-carte img { width: 130px; height: 130px; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 5px rgba(46, 53, 41, 0.2)); }
.mouvement .ce-vue-bravo.arrive .ce-nouveau-carte { animation: retourne 0.9s cubic-bezier(0.3, 1.3, 0.5, 1) 0.6s backwards; }
@keyframes retourne { from { transform: perspective(600px) rotateY(180deg) scale(0.3); opacity: 0; } 50% { opacity: 1; } }
.mouvement .ce-vue-bravo.arrive .ce-bravo-txt { animation: pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s backwards; }
.ce-vue-bravo .ce-bravo-img { width: min(220px, 52vw); }

/* ============================================================= MOTION DESIGN v2
   Même règle : chaque mouvement répond au défilement, au survol ou à un clic,
   joue une fois, et disparaît avec « Lecture confort » ou « réduire les animations ». */

/* 1. Transitions douces d'une page à l'autre (Chrome, Edge, Safari récents) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.entete, .ce-barre { view-transition-name: entete; }
.progression { view-transition-name: progression; }
::view-transition-old(root) { animation: vt-sort 0.26s ease both; }
::view-transition-new(root) { animation: vt-entre 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes vt-sort { to { opacity: 0; transform: translateY(-14px) scale(0.99); } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(26px); } }
html.confort::view-transition-old(*), html.confort::view-transition-new(*), html.confort::view-transition-group(*) { animation: none !important; }

/* 2. Un trait au pinceau se dessine sous le mot clé des titres */
.trait { position: relative; white-space: nowrap; isolation: isolate; }
.trait::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.12em; height: 0.32em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C40 4 90 3.2 130 5.2c22 1.1 44 2.6 66 1.6' fill='none' stroke='%23c26a4a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat; opacity: 0.75; pointer-events: none; z-index: -1; }
.bande-defi .trait::after, .offre-app-bloc .trait::after { filter: brightness(1.6) saturate(0.7); }
.mouvement .trait::after { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.6, 0.05, 0.2, 1) 0.35s; }
.mouvement .trait.vu::after { clip-path: inset(0 0 0 0); }

/* 3. Les titres des autres pages montent aussi mot à mot */
.mouvement .tete-page h1 .mot, .mouvement .fiche h1 .mot { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(3deg); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--m) * 55ms); }
.mouvement.pret .tete-page h1 .mot, .mouvement.pret .fiche h1 .mot { opacity: 1; transform: none; }

/* 4. Les illustrations « éclosent » quand leur bloc arrive */
.mouvement .tete-img { animation: eclot 1s cubic-bezier(0.3, 1.4, 0.5, 1) 0.25s both; translate: 0 calc(var(--sy, 0) * -0.1px); }
@keyframes eclot { from { transform: scale(0.5) rotate(-12deg); opacity: 0; } }
.mouvement [data-revele] .kit-liste img, .mouvement .kit-liste [data-revele] img, .mouvement .outil[data-revele] img, .mouvement .produit[data-revele] .produit-img { transform: scale(0.55) rotate(-10deg); opacity: 0; transition: transform 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i, 0) * 70ms + 0.2s), opacity 0.4s ease calc(var(--i, 0) * 70ms + 0.2s); }
.mouvement .kit-liste .vu img, .mouvement .outil.vu img, .mouvement .outils-scene .outil img, .mouvement .produit.vu .produit-img { transform: none; opacity: 1; }
.mouvement .pied-plante { transform-origin: 50% 100%; transform: translateY(24px) scale(0.6) rotate(-8deg); opacity: 0; transition: transform 1s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.5s ease; }
.mouvement .pied-plante.vu { transform: none; opacity: 1; }

/* 5. Au survol, les illustrations font un petit coucou (une fois par survol) */
@media (hover: hover) and (pointer: fine) {
  .mouvement .outil:hover img, .mouvement .kit-liste li:hover img, .mouvement .produit:hover .produit-img, .mouvement .offre:hover .offre-img { animation: coucou 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
  .mouvement .outil:hover, .mouvement .kit-liste li:hover { transform: translateY(-5px); }
  .kit-liste li { transition: transform 0.25s ease; }
}
@keyframes coucou { 30% { transform: rotate(-9deg) scale(1.08); } 65% { transform: rotate(6deg) scale(1.04); } }

/* 6. Les cartes d'offre s'inclinent sous la souris, avec un reflet de lumière */
.deux-offres, .produits, .fiche { perspective: 1200px; }
.mouvement .incline { transition: opacity 0.7s ease calc(var(--i, 0) * 70ms), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 70ms), box-shadow 0.25s, rotate 0.35s ease-out; }
.mouvement .incline.suit { transition-property: opacity, transform, box-shadow; }
.mouvement .incline::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 253, 250, 0.32), transparent 60%); opacity: 0; transition: opacity 0.3s; }
.mouvement .incline.suit::before { opacity: 1; }
.produit-phare.incline, .fiche-visuel.incline { position: relative; }

/* 7. La bande du Défi s'ouvre en grand pendant qu'on descend */
.mouvement .bande-defi, .mouvement .offre-app-bloc { transform: scale(calc(0.9 + 0.1 * var(--p, 1))); border-radius: calc(40px + (1 - var(--p, 1)) * 36px); transform-origin: 50% 0; }

/* 8. Les coches se posent une à une */
.mouvement [data-revele] .coches li::before, .mouvement .garanties[data-revele] li::before { transform: scale(0) rotate(-90deg); transition: transform 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mouvement [data-revele].vu .coches li::before, .mouvement .garanties[data-revele].vu li::before { transform: none; }
.coches li:nth-child(1)::before, .garanties li:nth-child(1)::before { transition-delay: 0.35s !important; }
.coches li:nth-child(2)::before, .garanties li:nth-child(2)::before { transition-delay: 0.5s !important; }
.coches li:nth-child(3)::before, .garanties li:nth-child(3)::before { transition-delay: 0.65s !important; }
.coches li:nth-child(4)::before { transition-delay: 0.8s !important; }
.coches li:nth-child(5)::before { transition-delay: 0.95s !important; }

/* 9. Menu du téléphone et onglets de la démo : ouverture en douceur */
.mouvement .menu[open] nav { animation: deroule 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1); transform-origin: 90% 0; }
@keyframes deroule { from { opacity: 0; transform: translateY(-8px) scale(0.94); } }
.mouvement .panneau.arrive { animation: panneau 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes panneau { from { opacity: 0; transform: translateX(18px); } }

/* 10. Le bouton principal : une lueur passe quand on le survole */
.btn:not(.btn-bientot) { position: relative; overflow: hidden; isolation: isolate; }
.mouvement .btn:not(.btn-bientot)::after { content: ""; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 253, 250, 0.35) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.mouvement .btn-contour::after, .mouvement .btn-contour-clair::after { background: linear-gradient(110deg, transparent 30%, rgba(138, 153, 127, 0.25) 50%, transparent 70%) !important; }
@media (hover: hover) { .mouvement .btn:not(.btn-bientot):hover::after { transform: translateX(120%); transition: transform 0.7s ease; } }

/* 11. Héros : les livres puis les arches de l'arc-en-ciel s'empilent un par un */
.mouvement .pile img { opacity: 0; }
.mouvement.pret .pile img { animation: empile 0.7s calc(0.3s + var(--n) * 0.17s) both; }
.mouvement.pret .pile img:nth-child(n+4) { animation-name: empile-arche; animation-duration: 0.75s; animation-delay: calc(0.42s + var(--n) * 0.19s); }
@keyframes empile {
  0% { opacity: 0; transform: translateY(-90px) rotate(-2deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  15% { opacity: 1; }
  58% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  76% { transform: translateY(-9px); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  100% { opacity: 1; transform: none; }
}
@keyframes empile-arche {
  0% { opacity: 0; transform: translateY(-120px) scale(0.96); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  15% { opacity: 1; }
  55% { transform: translateY(0) scale(1.02, 0.97); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  74% { transform: translateY(-7px) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  100% { opacity: 1; transform: none; }
}
.pile img:nth-child(n+4) { transform-origin: 50% 100%; }
/* les petites étiquettes arrivent une fois la pile terminée */
.mouvement .puce { transition: none; opacity: 0; }
.mouvement.pret .puce { opacity: 1; translate: 0 0; animation: puce-arrive 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.2) 1.75s both; }
.mouvement.pret .puce-2 { animation-delay: 2s; }
.mouvement.pret .puce-3 { animation-delay: 2.25s; }
@keyframes puce-arrive { from { opacity: 0; translate: 0 18px; scale: 0.9; } }

/* ============================================================= CRÉATEUR DE ROUTINE */
.atelier { max-width: var(--large); margin: 0 auto; padding: 24px 20px 40px; display: grid; gap: 18px; }
.atelier-reglages { display: contents; }
.ar-bloc { background: var(--blanc); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); min-width: 0; }
.ar-titre { font-size: 1.35rem; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ar-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--sauge-nuit); color: var(--blanc); display: grid; place-items: center; font-size: 1.05rem; }
.ar-aide { color: var(--encre-douce); font-size: 1rem; line-height: 1.55; margin: 0 0 14px; }
.lien-btn { all: unset; cursor: pointer; font-weight: 700; color: var(--terre-fonce); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.lien-btn:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; border-radius: 4px; }

.ar-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ar-chip { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; border-radius: 20px; background: var(--creme); border: 2px solid transparent; font-family: var(--titre); font-weight: 700; font-size: 1rem; text-align: center; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.ar-chip img { width: 56px; height: 56px; }
.ar-chip:hover { transform: translateY(-2px); }
.ar-chip[aria-pressed="true"] { background: var(--sauge-pale); border-color: var(--sauge-fonce); }
.ar-chip:focus-visible, .ar-etape-img:focus-visible, .ar-etape-outils button:focus-visible, .rc-img:focus-visible, .rc-fermer:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.ar-annonce { margin: 14px 0 0; background: var(--bois-pale); border-radius: 16px; padding: 10px 14px; font-size: 1rem; }

.ar-champs { display: grid; gap: 14px; }
@media (min-width: 640px) { .ar-champs { grid-template-columns: 1fr 1.4fr; } }
.ar-champ { display: grid; gap: 6px; font-weight: 700; font-size: 1rem; }
.ar-champ small { font-weight: 400; color: var(--encre-douce); }
.ar-champ input, .ar-etape input { font: inherit; font-weight: 400; font-size: 1.05rem; color: var(--encre); background: var(--creme); border: 2px solid var(--bois); border-radius: 14px; padding: 10px 14px; min-height: 48px; width: 100%; min-width: 0; }
.ar-champ input:focus, .ar-etape input:focus { outline: none; border-color: var(--sauge-fonce); background: var(--blanc); }

.ar-etapes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.ar-etape { display: grid; grid-template-columns: 26px 60px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: var(--creme); border-radius: 18px; padding: 8px 10px 8px 12px; }
.ar-etape-num { font-family: var(--titre); font-weight: 800; color: var(--sauge-fonce); text-align: center; }
.ar-etape-img { all: unset; box-sizing: border-box; cursor: pointer; width: 60px; height: 60px; border-radius: 14px; background: var(--blanc); display: grid; place-items: center; position: relative; }
.ar-etape-img img { width: 50px; height: 50px; }
.ar-etape-img::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--sauge-nuit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 13.5V15h1.5l7-7L12 6.5l-7 7zM14.2 7.3l.9-.9a.8.8 0 000-1.1l-.4-.4a.8.8 0 00-1.1 0l-.9.9z' fill='%23fffdfa'/%3E%3C/svg%3E") center/100% no-repeat; }
.ar-etape-outils { display: flex; gap: 4px; }
.ar-etape-outils button { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; border-radius: 12px; background: var(--blanc); display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; color: var(--encre); }
.ar-etape-outils button:hover:not(:disabled) { background: var(--sauge-pale); }
.ar-etape-outils button[data-suppr]:hover:not(:disabled) { background: #f6dfd6; color: var(--terre-fonce); }
.ar-etape-outils button:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 520px) {
  .ar-etape { grid-template-columns: 22px 56px minmax(0, 1fr); padding: 8px; }
  .ar-etape-outils { grid-column: 2 / -1; justify-content: flex-end; }
  .ar-etape-img { width: 56px; height: 56px; }
}
.mouvement .ar-etape.nouveau { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mouvement .ar-etape.deplace { animation: deplace 0.6s ease; }
@keyframes deplace { 0% { background: var(--sauge-pale); transform: scale(1.02); } }

.ar-dispo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.ar-dispo-choix { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: 20px; background: var(--creme); border: 2px solid transparent; }
.ar-dispo-choix input, .ar-couleur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ar-dispo-choix:has(input:checked) { background: var(--sauge-pale); border-color: var(--sauge-fonce); }
.ar-dispo-choix:has(input:focus-visible), .ar-couleur:has(input:focus-visible) { outline: 3px solid var(--terre); outline-offset: 2px; }
.ar-dispo-choix b { font-family: var(--titre); font-size: 1.02rem; }
.ar-dispo-choix small { color: var(--encre-douce); font-size: 0.85rem; line-height: 1.3; }
.ar-dispo-icone { width: 40px; height: 50px; border-radius: 6px; background: var(--blanc); border: 2px solid var(--bois); padding: 4px; display: grid; gap: 3px; margin-bottom: 6px; }
.ar-dispo-icone i { background: var(--sauge); border-radius: 2px; }
.ar-dispo-liste { grid-template-rows: repeat(4, 1fr); }
.ar-dispo-grille { grid-template-columns: 1fr 1fr; }
.ar-dispo-frise { width: 54px; height: 40px; grid-template-columns: repeat(4, 1fr); padding: 8px 4px; }
.ar-options { display: grid; gap: 4px; margin-bottom: 16px; }
.ar-coche { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 1.02rem; }
.ar-coche input { width: 22px; height: 22px; accent-color: var(--sauge-fonce); }
.ar-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-couleur { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--creme); border: 2px solid transparent; font-weight: 700; font-size: 0.98rem; min-height: 44px; }
.ar-couleur span { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--a-accent) 50%, var(--a-doux) 50%); }
.ar-couleur:has(input:checked) { border-color: var(--encre); background: var(--blanc); }
.ar-fin { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ar-fin .ar-aide { margin: 0; }

/* L'aperçu : l'affiche est dessinée à sa vraie taille (A4) puis réduite */
.atelier-apercu { min-width: 0; }
.apercu-legende { margin: 0 0 8px; font-size: 0.9rem; font-weight: 700; color: var(--encre-douce); text-align: center; letter-spacing: 0.03em; }
.apercu-cadre { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 2px 4px rgba(46, 53, 41, 0.08), 0 24px 50px rgba(46, 53, 41, 0.16); background: #fff; }
.apercu-cadre .affiche { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
@media (max-width: 999px) { .atelier-apercu { order: 1; max-width: 560px; width: 100%; justify-self: center; } .ar-fin { order: 2; } }
@media (min-width: 1000px) {
  .atelier { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); align-items: start; column-gap: 32px; }
  .ar-bloc { grid-column: 1; }
  .atelier-apercu { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 104px; }
}

/* L'affiche elle-même (mêmes règles à l'écran et à l'impression) */
.affiche { width: 210mm; height: 297mm; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.affiche.paysage { width: 297mm; height: 210mm; }
.coul-sauge { --a-fond: #f2f5ee; --a-doux: #dfe7d8; --a-accent: #4e5f47; }
.coul-terre { --a-fond: #fbf2ec; --a-doux: #f4dccf; --a-accent: #a9512f; }
.coul-soleil { --a-fond: #fdf7e9; --a-doux: #f6e5bd; --a-accent: #94681a; }
.coul-lavande { --a-fond: #f4f2f9; --a-doux: #e2dcef; --a-accent: #5f5287; }
.aff-in { position: relative; overflow: hidden; height: 100%; padding: 11mm; display: flex; flex-direction: column; background: var(--a-fond); color: #2e3529; font-family: var(--texte); line-height: 1.15; }
.aff-in::before, .aff-in::after { content: ""; position: absolute; border-radius: 50%; background: var(--a-doux); z-index: 0; }
.aff-in::before { width: 90mm; height: 90mm; right: -34mm; top: -38mm; }
.aff-in::after { width: 70mm; height: 70mm; left: -30mm; bottom: -32mm; }
.aff-in > * { position: relative; z-index: 1; }
.aff-tete { height: 40mm; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; }
.paysage .aff-tete { height: 30mm; }
.aff-tete h2 { margin: 0; font-family: var(--titre); font-weight: 800; font-size: var(--ft, 14mm); line-height: 1.02; letter-spacing: -0.02em; color: var(--a-accent); text-wrap: balance; }
.aff-prenom { display: block; font-size: 0.62em; letter-spacing: 0; color: #2e3529; margin-top: 1.5mm; }
.aff-soleil { position: absolute; right: 2mm; top: 1mm; width: 15mm; height: 15mm; border-radius: 50%; background: #e6a93a; box-shadow: 0 0 0 3mm rgba(230, 169, 58, 0.22); }
.aff-etapes { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3.2mm; align-content: center; }
.aff-etape { position: relative; height: var(--h); background: #fff; border-radius: 5mm; box-shadow: 0 0.7mm 0 var(--a-doux); display: flex; align-items: center; gap: 5mm; padding: 0 6mm 0 5mm; }
.aff-etape img { width: var(--img); height: var(--img); object-fit: contain; flex: 0 0 auto; }
.aff-txt { flex: 1; min-width: 0; font-family: var(--titre); font-weight: 700; font-size: var(--fs); overflow-wrap: anywhere; }
.aff-num { flex: 0 0 auto; width: calc(var(--fs) * 1.45); height: calc(var(--fs) * 1.45); border-radius: 50%; background: var(--a-accent); color: #fff; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: calc(var(--fs) * 0.82); }
.aff-case { flex: 0 0 auto; width: calc(var(--fs) * 1.55); height: calc(var(--fs) * 1.55); border: 0.8mm solid var(--a-accent); border-radius: 2.4mm; background: #fff; }
.aff-grille .aff-etapes { gap: 5mm; }
.aff-grille .aff-etape, .aff-frise .aff-etape { flex-direction: column; justify-content: center; text-align: center; gap: 2.5mm; padding: 4mm; }
.aff-grille .aff-txt, .aff-frise .aff-txt { flex: 0 0 auto; }
.aff-grille .aff-num, .aff-frise .aff-num { position: absolute; left: 3mm; top: 3mm; }
.aff-grille .aff-case, .aff-frise .aff-case { position: absolute; right: 3mm; top: 3mm; }
.aff-frise .aff-etapes { column-gap: 7mm; row-gap: 6mm; }
.aff-frise .aff-etape:not(.fin-rang)::after { content: ""; position: absolute; right: -5.6mm; top: 50%; width: 3.2mm; height: 3.2mm; border-top: 1mm solid var(--a-accent); border-right: 1mm solid var(--a-accent); transform: translateY(-50%) rotate(45deg); }
.aff-bravo { flex: 0 0 auto; height: 20mm; margin: 0; display: flex; align-items: center; justify-content: center; gap: 4mm; font-family: var(--titre); font-weight: 800; font-size: 8mm; color: var(--a-accent); }
.paysage .aff-bravo { height: 17mm; font-size: 7mm; }
.aff-etoile { width: 8mm; height: 8mm; background: #e6a93a; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.aff-signature { position: absolute !important; right: 8mm; bottom: 3.5mm; margin: 0; font-size: 2.6mm; color: #2e3529; opacity: 0.5; }

/* La fenêtre de choix des images */
.rc-dialogue { width: min(760px, calc(100vw - 24px)); max-height: min(86vh, 900px); border: 0; border-radius: 28px; padding: 0; background: var(--blanc); color: var(--encre); box-shadow: 0 30px 80px rgba(46, 53, 41, 0.3); }
.rc-dialogue::backdrop { background: rgba(46, 53, 41, 0.45); }
.mouvement .rc-dialogue[open] { animation: deroule 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.rc-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px 24px; background: var(--blanc); }
.rc-tete h2 { margin: 0; font-size: 1.4rem; }
.rc-fermer { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; font-size: 1.6rem; line-height: 1; }
.rc-grille { list-style: none; margin: 0; padding: 4px 20px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.rc-img { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; border-radius: 18px; background: var(--creme); border: 2px solid transparent; text-align: center; font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.rc-img img { width: 72px; height: 72px; }
.rc-img:hover { background: var(--sauge-pale); }
.rc-img[aria-pressed="true"] { border-color: var(--sauge-fonce); background: var(--sauge-pale); }

/* Impression : seule l'affiche sort, à la taille exacte d'une page A4 */
#impression { display: none; }
@media print {
  body.avec-affiche > *:not(#impression) { display: none !important; }
  body.avec-affiche #impression { display: block; }
  body.avec-affiche { background: #fff; margin: 0; }
  #impression .affiche { transform: none; box-shadow: none; overflow: hidden; break-after: avoid; }
}
.ar-appli { margin-top: 0; }
@media (min-width: 860px) { .ar-appli { grid-template-columns: 180px 1fr; } }
.ar-appli > img { width: 160px; justify-self: center; }
.ar-appli .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* Carte d'entrée vers le créateur de routine */
.carte-outil { display: flex; align-items: center; gap: 20px; text-decoration: none; color: var(--encre); background: var(--sauge-pale); border-radius: var(--rayon); padding: 22px 26px; border: 2px solid transparent; transition: transform 0.2s, border-color 0.2s; }
.carte-outil:hover { transform: translateY(-3px); border-color: var(--sauge); }
.carte-outil:hover .offre-lien::after { transform: translateX(4px); }
.carte-outil-img { width: 110px; height: 110px; flex: 0 0 auto; }
.carte-outil-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.carte-outil-titre { font-family: var(--titre); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.1; letter-spacing: -0.015em; }
.carte-outil-desc { color: var(--encre-douce); font-size: 1.02rem; line-height: 1.5; }
@media (max-width: 520px) { .carte-outil { flex-direction: column; align-items: flex-start; } .carte-outil-img { width: 90px; height: 90px; } }
.pile-ressources { display: grid; gap: 14px; min-width: 0; }
.section-outil { padding-bottom: 0; }
.carte-outil .etiquette { background: var(--blanc); color: var(--sauge-fonce); margin: 0; }

/* ============================================================= LA FICHE DE MON ENFANT */
.ar-champs-egal { margin-bottom: 16px; }
@media (min-width: 640px) { .ar-champs-egal { grid-template-columns: 1fr 1fr; } }
.ar-champ textarea { font: inherit; font-weight: 400; font-size: 1.02rem; line-height: 1.5; color: var(--encre); background: var(--creme); border: 2px solid var(--bois); border-radius: 14px; padding: 10px 14px; width: 100%; min-width: 0; resize: vertical; }
.ar-champ textarea:focus { outline: none; border-color: var(--sauge-fonce); background: var(--blanc); }
.fi-photo { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.fi-photo-vue { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: var(--sauge-pale) center / cover no-repeat; box-shadow: 0 0 0 4px var(--blanc), 0 0 0 6px var(--bois); }
.fi-photo-vue.vide { background-size: 78%; }
.fi-photo .ar-aide { margin: 8px 0 0; font-size: 0.92rem; }
.fi-photo-btn { position: relative; cursor: pointer; }
.fi-photo-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fi-photo-btn:focus-within { outline: 3px solid var(--terre); outline-offset: 3px; }
.fi-rubriques { display: grid; gap: 12px; }
.fi-rubrique { background: var(--creme); border-radius: 22px; padding: 16px 18px 18px; }
.fi-rub-titre { display: flex; align-items: center; gap: 12px; font-size: 1.12rem; margin-bottom: 10px; }
.fi-rub-titre img { width: 44px; height: 44px; flex: 0 0 auto; }
.fi-rub-titre small { display: block; font-family: var(--texte); font-weight: 400; font-size: 0.86rem; color: var(--encre-douce); letter-spacing: 0; }
.fi-lignes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.fi-lignes li { display: flex; gap: 6px; }
.fi-lignes input { flex: 1; min-width: 0; font: inherit; font-size: 1.02rem; color: var(--encre); background: var(--blanc); border: 2px solid var(--bois-pale); border-radius: 12px; padding: 8px 12px; min-height: 44px; }
.fi-lignes input:focus { outline: none; border-color: var(--sauge-fonce); }
.fi-lignes button { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--blanc); display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; }
.fi-lignes button:hover { background: #f6dfd6; color: var(--terre-fonce); }
.fi-lignes button:focus-visible, .fi-idee:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.fi-ajouter:disabled { color: var(--encre-douce); text-decoration: none; cursor: default; }
.fi-idees-titre { margin: 10px 0 6px; font-size: 0.9rem; font-weight: 700; color: var(--encre-douce); }
.fi-idees { display: flex; flex-wrap: wrap; gap: 6px; }
.fi-idee { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 12px; min-height: 38px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--blanc); border: 1.5px dashed var(--bois); font-size: 0.92rem; line-height: 1.3; }
.fi-idee::before { content: "+"; font-weight: 700; margin-right: 6px; color: var(--sauge-fonce); }
.fi-idee:hover:not(:disabled) { border-color: var(--sauge-fonce); }
.fi-idee[aria-pressed="true"] { background: var(--sauge-fonce); color: var(--blanc); border: 1.5px solid var(--sauge-fonce); }
.fi-idee[aria-pressed="true"]::before { content: "✓"; color: var(--blanc); }
.fi-idee:disabled { opacity: 0.4; cursor: default; }
.mouvement .fi-idee[aria-pressed="true"] { animation: pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.atelier-fiche .ar-fin .ar-annonce { margin: 0; }

/* La fiche imprimée : tout est en em, la taille de base --fs s'ajuste pour tenir sur une page */
.coul-sauge { --t1: #e1e9d6; --t2: #f8e6d8; --t3: #f3ead0; --a-accent2: #c26a4a; }
.coul-terre { --t1: #f6dccd; --t2: #e6ecdc; --t3: #f5e7c6; --a-accent2: #4e5f47; }
.coul-soleil { --t1: #f5e4b9; --t2: #f6e0d4; --t3: #e2eada; --a-accent2: #c26a4a; }
.coul-lavande { --t1: #e3dcf0; --t2: #f6e1e6; --t3: #dcebe8; --a-accent2: #b9586f; }
.fi-aff { padding: 9mm 11mm 8mm; font-size: var(--fs); line-height: 1.34; gap: 0.85em; justify-content: space-between; }
.fi-aff::before { background: var(--t1); width: 100mm; height: 100mm; right: -50mm; top: -56mm; }
.fi-aff::after { background: var(--t2); width: 76mm; height: 76mm; left: -40mm; bottom: -44mm; }
.fi-deco { position: absolute !important; color: #e6a93a; }
.fi-deco svg { width: 100%; height: 100%; }
.fi-deco-1 { top: 7mm; right: 52mm; width: 6mm; height: 6mm; }
.fi-deco-2 { top: 30mm; right: 49mm; width: 4.2mm; height: 4.2mm; color: var(--a-accent2); opacity: 0.6; }
.fi-tete { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2em; }
.fi-tete h2 { margin: 0 0 0.25em; font-family: var(--titre); font-weight: 800; font-size: 3.5em; line-height: 0.98; letter-spacing: -0.03em; color: #2e3529; text-wrap: balance; }
.fi-nom { color: var(--a-accent2); }
.fi-ruban { margin: 0; }
.fi-ruban span { display: inline-block; padding: 0.35em 1.7em 0.4em; background: var(--t1); color: var(--a-accent); font-family: var(--titre); font-weight: 700; font-size: 1.12em; clip-path: polygon(0 0, 100% 0, 96.5% 50%, 100% 100%, 0 100%, 3.5% 50%); }
.fi-tete .fi-avatar { width: 7.2em; height: 7.2em; margin: 0.3em 0.4em 0 0; }
.fi-avatar { position: relative; flex: 0 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.45em #fff, 0 0 0 0.8em var(--t3); display: grid; place-items: center; overflow: hidden; }
.fi-avatar > img { width: 80%; height: 80%; object-fit: contain; }
.fi-avatar > img.fi-avatar-photo { width: 100%; height: 100%; object-fit: cover; }
.fi-intro { flex: 0 0 auto; background: var(--t2); border-radius: 1.1em; padding: 0.85em 1.6em; text-align: center; }
.fi-intro p { margin: 0; }
.fi-intro p + p { margin-top: 0.45em; }
.fi-merci { color: var(--a-accent2); font-weight: 700; }
.fi-merci-coeur { width: 0.95em; height: 0.95em; vertical-align: -0.12em; margin-right: 0.35em; }
.fi-cadre { position: relative; flex: 0 0 auto; background: #fff; border-radius: 1.1em; padding: 0.95em 1.25em; box-shadow: 0 0.25mm 0 0.25mm var(--t1); }
.fi-aides-cadre { margin-top: 0.75em; padding-top: 1.35em; }
.fi-onglet { position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); margin: 0; padding: 0.32em 1.3em 0.36em; border-radius: 0.45em; background: var(--a-accent); color: #fff; font-family: var(--titre); font-weight: 800; font-size: 1.1em; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.fi-aides-grille { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.fi-aide-col { padding: 0 0.95em; text-align: center; display: flex; flex-direction: column; align-items: center; }
.fi-aide-col + .fi-aide-col { border-left: 0.3mm dashed var(--t1); }
.fi-aide-col b { font-family: var(--titre); font-weight: 800; font-size: 1.12em; line-height: 1.15; color: #2e3529; }
.fi-aide-col img { width: 5em; height: 5em; object-fit: contain; margin: 0.35em 0 0.3em; }
.fi-aide-col p { margin: 0; font-size: 0.94em; color: #3d453a; }
.fi-picto { display: grid; place-items: center; width: 4.4em; height: 4.4em; margin: 0.6em 0 0.6em; border-radius: 50%; background: var(--t3); color: var(--a-accent2); }
.fi-picto svg { width: 2.3em; height: 2.3em; }
.fi-etiquette { display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.4em; font-family: var(--titre); font-weight: 800; font-size: 1.08em; letter-spacing: 0.03em; text-transform: uppercase; color: var(--a-accent); }
.fi-repere { display: flex; align-items: center; gap: 1.1em; background: var(--t3); box-shadow: none; }
.fi-repere p { margin: 0; }
.fi-repere-ico { flex: 0 0 auto; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: #fff; color: var(--a-accent2); }
.fi-repere-ico svg { width: 1.9em; height: 1.9em; }
.fi-difficulte { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.1em; align-items: start; background: var(--t1); box-shadow: none; }
.fi-difficulte:has(.fi-diff-gauche:only-child) { grid-template-columns: 1fr; }
.fi-nuage { width: 1.5em; height: 1.5em; color: var(--a-accent); }
.fi-diff-intro { margin: 0 0 0.4em; font-weight: 700; }
.fi-diff-droite { background: #fff; border-radius: 0.9em; padding: 0.75em 1em 0.8em; }
.fi-diff-droite h4 { margin: 0 0 0.4em; font-family: var(--titre); font-weight: 800; font-size: 1.05em; color: var(--a-accent); }
.fi-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.28em; }
.fi-liste-2col { grid-template-columns: 1fr 1fr; column-gap: 1em; }
.fi-liste li { position: relative; padding-left: 1.35em; }
.fi-puce { position: absolute; left: 0; top: 0.22em; width: 0.92em; height: 0.92em; color: var(--a-accent); }
.fi-duo { flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.85em; }
.fi-duo .fi-cadre { padding: 0.85em 1.15em; }
.fi-fin { flex: 0 0 auto; display: flex; gap: 0.85em; align-items: stretch; }
.fi-fin-mot { flex: 1; margin: 0; background: #fff; border-radius: 1.1em; padding: 0.85em 1.3em; border: 0.3mm dashed var(--a-accent); font-size: 0.97em; }
.fi-contact { flex: 0 0 auto; max-width: 42%; margin: 0; display: flex; align-items: center; gap: 0.6em; background: var(--t2); border-radius: 1.1em; padding: 0.85em 1.2em; font-weight: 700; font-size: 0.97em; }
.fi-tel { flex: 0 0 auto; width: 1.3em; height: 1.3em; color: var(--a-accent); }
.fi-aff .aff-signature { bottom: 2.6mm; }

/* Formulaire de la fiche */
.fi-genre { display: flex; gap: 8px; flex-wrap: wrap; }
.fi-genre label { position: relative; cursor: pointer; }
.fi-genre input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fi-genre span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--creme); border: 2px solid var(--bois); font-weight: 700; }
.fi-genre input:checked + span { background: var(--sauge-pale); border-color: var(--sauge-fonce); }
.fi-genre input:focus-visible + span { outline: 3px solid var(--terre); outline-offset: 2px; }
.fi-ctx-chips { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.fi-ctx-aide { margin: 12px 0 14px; }
.fi-champ-large { margin-top: 14px; }
.fi-astuce { font-weight: 400; color: var(--encre-douce); font-size: 0.9rem; }
.fi-facultatif { font-family: var(--texte); font-weight: 700; font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; background: var(--bois-pale); color: #7a5a35; margin-left: 4px; }
.fi-aides { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.fi-aide { display: grid; grid-template-columns: 60px minmax(0, 1fr) 44px; gap: 12px; align-items: start; background: var(--creme); border-radius: 18px; padding: 12px; }
.fi-aide-champs { display: grid; gap: 6px; min-width: 0; }
.fi-aide-champs input, .fi-aide-champs textarea { font: inherit; font-size: 1rem; line-height: 1.45; color: var(--encre); background: var(--blanc); border: 2px solid var(--bois-pale); border-radius: 12px; padding: 8px 12px; width: 100%; min-width: 0; resize: vertical; }
.fi-aide-champs input { font-weight: 700; min-height: 44px; }
.fi-aide-champs input:focus, .fi-aide-champs textarea:focus { outline: none; border-color: var(--sauge-fonce); }
.fi-aide-retirer { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; background: var(--blanc); display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; }
.fi-aide-retirer:hover { background: #f6dfd6; color: var(--terre-fonce); }
.fi-aide-retirer:focus-visible, .fi-choix-aide:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.rc-picto { position: relative; display: block; width: 50px; height: 50px; border-radius: 50%; background: var(--bois-pale); }
.rc-picto::after { content: ""; position: absolute; inset: 13px; background: var(--terre); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17.5S2.5 12.8 2.5 7.6A4 4 0 0 1 10 5.4a4 4 0 0 1 7.5 2.2c0 5.2-7.5 9.9-7.5 9.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17.5S2.5 12.8 2.5 7.6A4 4 0 0 1 10 5.4a4 4 0 0 1 7.5 2.2c0 5.2-7.5 9.9-7.5 9.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rc-picto-etoile::after { background: #d39a2c; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.4 5.6 6.1.6-4.6 4.1 1.3 6-5.2-3.1-5.2 3.1 1.3-6L1.5 7.7l6.1-.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.4 5.6 6.1.6-4.6 4.1 1.3 6-5.2-3.1-5.2 3.1 1.3-6L1.5 7.7l6.1-.6z'/%3E%3C/svg%3E"); }
.rc-img .rc-picto { width: 72px; height: 72px; }
.rc-img .rc-picto::after { inset: 19px; }
.fi-choix-liste { list-style: none; margin: 0; padding: 4px 20px 24px; display: grid; gap: 8px; }
.fi-choix-aide { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--creme); border: 2px solid transparent; font-size: 0.95rem; line-height: 1.4; color: var(--encre-douce); }
.fi-choix-aide img { width: 56px; height: 56px; flex: 0 0 auto; }
.fi-choix-aide .rc-picto { flex: 0 0 auto; width: 56px; height: 56px; }
.fi-choix-aide b { display: block; color: var(--encre); font-family: var(--titre); font-size: 1.05rem; margin-bottom: 2px; }
.fi-choix-aide:hover:not(:disabled) { background: var(--sauge-pale); }
.fi-choix-aide:disabled { opacity: 0.4; cursor: default; }
.fi-choix-libre { border: 2px dashed var(--bois); background: var(--blanc); }
.fi-alerte { margin: 0; background: #fbe9d0; color: #6b4a14; border-radius: 16px; padding: 10px 14px; font-size: 0.98rem; }
.cartes-outils { display: grid; gap: 14px; }
.fi-aide-champs textarea { min-height: 5.6em; }
@media (max-width: 520px) {
  .fi-aide { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .fi-aide .ar-etape-img { width: 56px; height: 56px; }
  .fi-aide-champs { grid-column: 2; grid-row: 1 / span 2; }
  .fi-aide-retirer { grid-column: 1; grid-row: 2; width: 56px; }
}
/* Fiche : les illustrations */
.fi-tete { grid-template-columns: auto minmax(0, 1fr) auto; }
.fi-arc { width: 6.2em; align-self: start; margin-top: 0.4em; }
.fi-deco-1 { right: 50mm; top: 8mm; }
.fi-deco-2 { right: 46mm; top: 33mm; }
.fi-repere-img { flex: 0 0 auto; width: 6.4em; height: 6.4em; object-fit: contain; margin: -0.6em 0 -0.6em -0.3em; }
.fi-etiquette-nuage { position: relative; padding-left: 3.6em; min-height: 2.3em; }
.fi-nuage-img { position: absolute; left: -0.3em; top: -1.1em; width: 3.6em; height: 3.6em; object-fit: contain; }
.fi-aide-col img { width: 5.6em; height: 5.6em; }
.fi-tete h2 { font-size: min(3.4em, 14.2mm); }
.fi-ruban span { font-size: min(1.12em, 4.9mm); white-space: nowrap; }

/* ============================================================= L'ALBUM D'AUTOCOLLANTS */
.ce-album { display: grid; gap: 22px; }
.ce-page { --pc: #e6ebe0; position: relative; background: var(--blanc) radial-gradient(circle, rgba(214, 197, 177, 0.35) 1.2px, transparent 1.6px) 0 0 / 18px 18px; border-radius: 32px; padding: 18px 16px 26px; box-shadow: var(--ombre); }
.ce-page-soleil { --pc: var(--soleil-pale); }
.ce-page-terre { --pc: #f6e1d6; }
.ce-page-lavande { --pc: #e9e4f2; }
.ce-page-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 18px; padding: 8px 10px 8px 20px; border-radius: 999px; background: var(--pc); font: 800 1.3rem/1.2 var(--titre); }
.ce-page-titre small { flex: 0 0 auto; padding: 3px 12px; border-radius: 999px; background: var(--blanc); font-size: 1rem; }
.ce-page-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 18px 10px; }
@media (min-width: 760px) { .ce-page-grille { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } }
.ce-page-grille li { display: flex; justify-content: center; }
.ce-page-grille button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: 20px; padding: 2px; }
.ce-page-grille button:focus-visible { outline: 4px solid var(--terre); outline-offset: 2px; }
.ce-sticker { position: relative; display: block; width: 100%; max-width: 112px; transform: rotate(var(--r, 0deg)); transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1); }
.ce-sticker img { width: 100%; height: auto; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 5px 5px rgba(46, 53, 41, 0.22)); }
.ce-page-grille button:hover .ce-sticker, .ce-page-grille button:active .ce-sticker { transform: rotate(0deg) scale(1.08); }
.ce-sticker-nom { font: 700 0.85rem/1.2 var(--titre); color: var(--encre-douce); text-align: center; text-wrap: balance; }
/* Les autocollants brillants : un bord doré et une petite étoile */
.brille .ce-sticker img, .ce-nouveau-carte.brille img, .ce-zoom.brille .ce-zoom-img img { filter: drop-shadow(3px 0 0 #f7dd93) drop-shadow(-3px 0 0 #f7dd93) drop-shadow(0 3px 0 #f2c45d) drop-shadow(0 -3px 0 #fbeab5) drop-shadow(0 0 7px rgba(230, 169, 58, 0.55)) drop-shadow(0 5px 5px rgba(46, 53, 41, 0.2)); }
.brille .ce-sticker::after { content: ""; position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--soleil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l1.9 6.1L20 12l-6.1 1.9L12 21l-1.9-7.1L4 12l6.1-2.9z' fill='%23fff'/%3E%3C/svg%3E") center / 70% no-repeat; box-shadow: 0 0 0 3px #fff, 0 3px 4px rgba(46, 53, 41, 0.2); }
.brille .ce-sticker-nom { color: #8a5a10; }
/* Les places vides */
.ce-vide { position: relative; display: grid; place-items: center; width: 100%; max-width: 112px; aspect-ratio: 1; margin-bottom: 24px; border-radius: 26px; border: 2.5px dashed var(--bois); background: var(--creme); }
.ce-vide img { width: 70%; height: auto; filter: brightness(0); opacity: 0.07; }
.ce-vide > span { position: absolute; font: 800 1.5rem var(--titre); color: var(--bois); }
.prochain .ce-vide { border-color: var(--soleil); background: var(--soleil-pale); }
.prochain .ce-vide img { opacity: 0.12; }
.prochain .ce-vide > span.ce-encore { bottom: -14px; padding: 4px 12px; border-radius: 999px; background: var(--soleil); color: var(--encre); font-size: 0.9rem; white-space: nowrap; box-shadow: 0 3px 0 #b9801c; }
/* Le zoom */
.ce-zoom { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.ce-zoom[hidden] { display: none; }
.ce-zoom-fond { all: unset; position: absolute; inset: 0; background: rgba(46, 53, 41, 0.55); cursor: pointer; }
.ce-zoom-carte { position: relative; width: min(420px, 100%); display: grid; justify-items: center; gap: 10px; padding: 30px 24px 24px; border-radius: 36px; background: var(--blanc) radial-gradient(circle, rgba(214, 197, 177, 0.35) 1.2px, transparent 1.6px) 0 0 / 18px 18px; box-shadow: 0 30px 80px rgba(46, 53, 41, 0.35); text-align: center; }
.ce-zoom-img img { width: min(250px, 62vw); height: auto; filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 8px 8px rgba(46, 53, 41, 0.25)); }
.ce-zoom-nom { margin: 4px 0 6px; font: 800 1.6rem/1.15 var(--titre); }
.ce-zoom-brille { margin: 0; padding: 4px 14px; border-radius: 999px; background: var(--soleil); font: 800 1rem var(--titre); transform: rotate(-3deg); }
.mouvement .ce-zoom:not([hidden]) .ce-zoom-carte { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mouvement .ce-zoom:not([hidden]) .ce-zoom-img { animation: tremousse 0.6s 0.15s; }
.ce-nouveau-nom { font: 800 1.3rem/1.2 var(--titre); }

/* ============================================================= LES MISSIONS */
.ce-missions-btn { width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 16px; padding: 14px 22px; border: 0; border-radius: 32px; background: var(--sauge-pale); color: var(--encre); cursor: pointer; text-align: left; box-shadow: 0 6px 0 rgba(46, 53, 41, 0.12), var(--ombre); transition: transform 0.15s; }
.ce-missions-btn:active { transform: translateY(4px); }
.ce-missions-btn img { width: 74px; height: 74px; flex: 0 0 auto; }
.ce-missions { display: grid; gap: 22px; }
.ce-mgroupe { background: var(--blanc); border-radius: 32px; padding: 16px 16px 20px; box-shadow: var(--ombre); }
.ce-mgroupe-titre { justify-content: flex-start; gap: 10px; padding-left: 8px; background: var(--sauge-pale); }
.ce-mgroupe-titre img { width: 40px; height: 40px; }
.ce-mgrille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ce-mission { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 14px 10px 16px; border: 3px solid transparent; border-radius: 26px; background: var(--creme); font: 800 1.05rem/1.2 var(--titre); color: var(--encre); text-align: center; cursor: pointer; transition: transform 0.15s; }
.ce-mission:active { transform: scale(0.96); }
.ce-mission img { width: 88px; height: 88px; }
.ce-mission-ok { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 3px dashed var(--bois); background: var(--blanc); }
.ce-mission.faite { background: var(--sauge-pale); border-color: var(--sauge); }
.ce-mission.faite img { opacity: 0.55; }
.ce-mission.faite .ce-mission-ok { border: 0; background: var(--sauge-fonce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.mouvement .ce-mission.faite .ce-mission-ok { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ce-mission-img { width: min(280px, 64vw); height: auto; margin: 6px auto 0; }
.valide .ce-mission-img { opacity: 0.4; transition: opacity 0.2s; }
.ce-mission-carte { margin-bottom: 22px; padding-bottom: 22px; }
.ce-gros:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 420px) { .ce-mgrille { grid-template-columns: 1fr 1fr; } .ce-mission { font-size: 0.95rem; } .ce-mission img { width: 72px; height: 72px; } }
.ce-fait:disabled { opacity: 0.55; cursor: default; }

/* ---------- version gratuite / complète du coin des enfants ---------- */
.ce-verrou { position: relative; filter: saturate(0.55); }
.ce-verrou img { opacity: 0.6; }
.ce-cadenas-mini { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333402f' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='3' fill='%23e6a93a' stroke='%2333402f'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E") center/24px no-repeat; box-shadow: 0 3px 8px rgba(46, 53, 41, 0.18); }
.ce-missions-btn.ce-verrou .ce-cadenas-mini { top: 50%; transform: translateY(-50%); right: 18px; }
.ce-verrou-carte { max-width: 560px; margin: 24px auto 0; padding: 36px 26px 30px; border-radius: 36px; background: var(--blanc); box-shadow: var(--ombre); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ce-verrou-carte h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); margin: 0; text-wrap: balance; }
.ce-cadenas { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: var(--bois-pale); }
.ce-cadenas svg { width: 60px; height: 60px; fill: none; stroke: var(--sauge-nuit); stroke-width: 2.2; stroke-linecap: round; }
.ce-cadenas rect { fill: var(--soleil, #e6a93a); }
.ce-verrou-txt { font: 700 1.3rem/1.35 var(--titre); color: var(--encre-douce); margin: 0; }
.ce-verrou-adulte { text-decoration: none; font-size: 1.35rem; min-height: 72px; background: var(--sauge-nuit); box-shadow: 0 6px 0 #1f281c; }
.mouvement .ce-vue[data-vue="debloquer"]:not([hidden]) .ce-cadenas { animation: ce-cadenas 0.9s 0.1s both; }
@keyframes ce-cadenas { 0% { transform: scale(0.6) rotate(-14deg); opacity: 0; } 55% { transform: scale(1.08) rotate(6deg); opacity: 1; } 75% { transform: rotate(-4deg); } 100% { transform: none; } }

/* ---------- page parents : débloquer ---------- */
.acces-grille { max-width: var(--large); margin: 0 auto; display: grid; gap: 22px; }
@media (min-width: 860px) { .acces-grille { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.acces-col { min-width: 0; padding: 30px 26px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); }
.acces-plus { background: var(--sauge-pale); }
.acces-col h2 { font-size: 1.6rem; }
.acces-liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.acces-liste li { display: flex; align-items: center; gap: 16px; }
.acces-liste img { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 18px; background: var(--blanc); padding: 4px; }
.acces-col:not(.acces-plus) .acces-liste img { background: var(--creme); }
.acces-liste b { display: block; font-family: var(--titre); font-size: 1.12rem; line-height: 1.2; }
.acces-liste span { line-height: 1.4; color: var(--encre-douce); font-size: 1rem; }
.acces-liste span b { color: var(--encre); }
.acces-prix { padding-top: 18px; border-top: 2px dashed rgba(51, 64, 47, 0.2); display: grid; justify-items: start; gap: 10px; }
.acces-prix .offre-prix { margin: 0; }
.acces-deja { max-width: var(--large); margin: 0 auto 22px; padding: 18px 24px; border-radius: var(--rayon); background: var(--bois-pale); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.acces-deja p { margin: 0; }
.acces-retrouver { max-width: 760px; margin: 40px auto 0; padding: 28px 26px; border-radius: var(--rayon); border: 2px dashed var(--bois); }
.acces-retrouver h2 { font-size: 1.5rem; }
.acces-champ { display: flex; flex-wrap: wrap; gap: 12px; }
.acces-champ input { flex: 1 1 240px; min-width: 0; min-height: 54px; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--bois); background: var(--blanc); font: inherit; color: var(--encre); }
.acces-champ input:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.acces-msg { min-height: 1.7em; margin: 12px 0 0; font-weight: 700; }
.acces-ok { color: var(--sauge-fonce); }
.acces-ko { color: var(--terre-fonce); }
.lien-discret { display: inline-block; margin-top: 10px; font-weight: 700; }