/* Le fil de découvertes (27/09/2026, bêta). Script : js/popotam-decouverte.js.
   Plein écran, une carte par hauteur d'écran, défilement aimanté. Sur grand écran, une
   colonne au format téléphone au milieu d'un fond sombre : le geste est vertical partout.
   Tout est confiné sous .dc (les noms sont courts). */

html.dc-ouvert, html.dc-ouvert body { overflow: hidden; }

.dc {
  --dc-fond: #1E1712;
  --dc-creme: #FBF6EC;
  --dc-orange: #D2552F;
  --dc-or: #F2B544;
  --dc-vert: #3E7C59;
  position: fixed; inset: 0; z-index: 410;
  background: var(--dc-fond);
  color: var(--dc-creme);
  font-family: var(--font-body, "Hanken Grotesk", system-ui, sans-serif);
  /* Le fil monte du bas, comme un défilement qui commence, et redescend en partant. */
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.22,.8,.3,1);
}
.dc.show { transform: none; }

.dc-cadre {
  position: relative; height: 100%; margin: 0 auto;
  width: 100%; max-width: 480px;
  overflow: hidden;
}
@media (min-width: 700px) {
  .dc-cadre { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.5); }
}

/* ---------- la barre du haut, par-dessus les cartes ---------- */
.dc-haut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 18px;
  background: linear-gradient(to bottom, rgba(20,14,10,.62), rgba(20,14,10,0));
  pointer-events: none;
}
.dc-haut > * { pointer-events: auto; }
.dc-vide { width: 40px; }
.dc-titre { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dc-titre b { font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.dc-serie { display: flex; gap: 4px; min-height: 4px; }
.dc-serie i { width: 14px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); transition: background .25s ease, width .25s ease; }
.dc-serie i.fait { background: rgba(255,255,255,.85); }
.dc-serie i.ici { background: var(--dc-or); width: 22px; }

.dc-fermer {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dc-fermer:hover { background: rgba(255,255,255,.24); }
.dc :focus-visible { outline: 3px solid var(--dc-or); outline-offset: 2px; }

/* ---------- le fil ---------- */
.dc-fil {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.dc-fil::-webkit-scrollbar { display: none; }
.dc-fil:focus { outline: none; }

.dc-carte, .dc-pause {
  position: relative; height: 100%; min-height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden;
}

/* La photo couvre la carte ; le texte se lit sur un dégradé. */
.dc-photo { position: absolute; inset: 0; margin: 0; }
.dc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-ia {
  position: absolute; top: calc(78px + env(safe-area-inset-top, 0px)); left: 12px;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(20,14,10,.55); color: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dc-carte.a-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top, rgba(18,12,8,.92) 0%, rgba(18,12,8,.6) 45%, rgba(18,12,8,0) 100%);
  pointer-events: none;
}

/* Sans illustration : une teinte de catégorie, une assiette dessinée, trois ingrédients
   écrits à la main autour. La carte ne fait pas semblant d'avoir une photo. */
.dc-typo { position: absolute; inset: 0; display: grid; place-items: center; }
.dc-typo.t-sun  { background: radial-gradient(120% 80% at 50% 30%, #F7C35A 0%, #E89416 60%, #B9650F 100%); }
.dc-typo.t-vert { background: radial-gradient(120% 80% at 50% 30%, #7FB08E 0%, #3E7C59 60%, #25513A 100%); }
.dc-typo.t-rose { background: radial-gradient(120% 80% at 50% 30%, #E68AB4 0%, #C0457F 60%, #7F2752 100%); }
.dc-typo-assiette {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  width: min(62vw, 270px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FFFDF8 0 52%, #F1E6D4 53% 60%, #FFFDF8 61% 100%);
  box-shadow: 0 24px 50px rgba(0,0,0,.28), inset 0 -6px 14px rgba(0,0,0,.06);
}
.dc-typo-ings {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  width: min(62vw, 270px); aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center;
}
.dc-typo-ings i {
  font-family: Caveat, cursive; font-style: normal; font-weight: 600;
  font-size: clamp(22px, 6vw, 28px); line-height: 1.05; color: #5C3A1E;
  max-width: 76%;
}
.dc-typo-ings i:nth-child(2) { transform: rotate(-4deg); color: #A23C1C; }
.dc-typo-ings i:nth-child(3) { transform: rotate(3deg); }

.dc-bas {
  position: absolute; left: 0; right: 84px; bottom: 0; z-index: 2;
  padding: 0 16px calc(22px + env(safe-area-inset-bottom, 0px));
}
.dc-carte.sans-photo .dc-bas { right: 84px; }
.dc-nom {
  margin: 0 0 10px;
  font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: clamp(26px, 7.4vw, 34px); line-height: 1.08; letter-spacing: -.015em;
  color: #fff; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.dc-metas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dc-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dc-meta-vert { background: rgba(62,124,89,.75); }
.dc-voir {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 15px;
  padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--dc-creme); color: #2A211B;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.dc-voir:hover { background: #fff; }

/* ---------- le rail des gestes, à droite ---------- */
.dc-rail {
  position: absolute; right: 10px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.dc-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer; color: #fff; font: inherit;
  width: 70px;
}
.dc-act-rond {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background .2s ease, transform .2s ease;
}
.dc-act:hover .dc-act-rond { background: rgba(255,255,255,.28); }
.dc-act:active .dc-act-rond { transform: scale(.92); }
.dc-act-lbl { font-size: 12px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.5); text-align: center; line-height: 1.15; }
.dc-act-garde.is-on .dc-act-rond { background: var(--dc-or); color: #3A2508; }
.dc-act-garde.is-on svg { fill: currentColor; }
.dc-act-plan.is-on .dc-act-rond { background: var(--dc-vert); }
.dc-act.pop .dc-act-rond { animation: dcPop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes dcPop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- les cartes d'état, de pause et de fin ---------- */
.dc-etat, .dc-pause {
  display: grid; place-items: center; overflow-y: auto;
  background: radial-gradient(110% 70% at 50% 20%, #3A2B20 0%, var(--dc-fond) 70%);
}
.dc-etat-in, .dc-pause-in {
  width: 100%; max-width: 380px; padding: 70px 22px 30px;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.dc-pop { display: block; width: 116px; margin-bottom: 14px; }
.dc-pop svg { width: 100%; height: auto; display: block; }
.dc-pop-remue { animation: dcRemue 1.4s ease-in-out infinite; }
@keyframes dcRemue { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.dc-etat p { font-size: 16px; line-height: 1.45; margin: 0 0 16px; color: rgba(251,246,236,.9); }

.dc-pause-main {
  font-family: var(--font-display, Georgia, serif); font-size: 26px; line-height: 1.2;
  margin: 0 0 10px; color: #fff; text-wrap: balance;
}
.dc-pause-main b { color: var(--dc-or); font-weight: 600; }
.dc-pause-sous { font-size: 15px; line-height: 1.5; margin: 0 0 18px; color: rgba(251,246,236,.82); }
.dc-pause-sous b { color: #fff; }
.dc-pause-q { font-family: Caveat, cursive; font-size: 26px; margin: 0 0 14px; color: var(--dc-or); }
.dc-pause-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 15px;
  padding: 13px 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(251,246,236,.35); background: transparent; color: var(--dc-creme);
}
.dc-btn:hover { background: rgba(255,255,255,.08); }
.dc-btn-plein { background: var(--dc-orange); border-color: var(--dc-orange); color: #fff; }
.dc-btn-plein:hover { background: #BF4A27; }
.dc-btn-nu { border-color: transparent; color: rgba(251,246,236,.75); font-weight: 600; }

.dc-pourquoi { margin-top: 18px; width: 100%; text-align: left; }
.dc-pourquoi summary {
  cursor: pointer; list-style: none; text-align: center;
  font-size: 14px; font-weight: 600; color: rgba(251,246,236,.75);
  text-decoration: underline; text-underline-offset: 3px;
}
.dc-pourquoi summary::-webkit-details-marker { display: none; }
.dc-pourquoi p { font-size: 14px; line-height: 1.55; color: rgba(251,246,236,.85); margin: 12px 0 0; }
.dc-pourquoi[open] p { animation: dcDeplie .38s cubic-bezier(.22,.8,.3,1) both; }
.dc-pourquoi[open] p + p { animation-delay: .08s; }
@keyframes dcDeplie { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.dc-pourquoi summary::after { content: " ▾"; display: inline-block; transition: transform .25s ease; }
.dc-pourquoi[open] summary::after { transform: rotate(180deg); }

/* ---------- la feuille de recette ---------- */
.dc-feuille { position: absolute; inset: 0; z-index: 5; }
.dc-feuille-fond { position: absolute; inset: 0; background: rgba(10,6,4,.5); opacity: 0; transition: opacity .22s ease; }
.dc-feuille-in {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%;
  display: flex; flex-direction: column;
  background: var(--dc-creme); color: #2A211B;
  border-radius: 22px 22px 0 0;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.22,.7,.3,1);
}
.dc-feuille.show .dc-feuille-fond { opacity: 1; }
.dc-feuille.show .dc-feuille-in { transform: none; }
.dc-feuille-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 16px 10px; border-bottom: 1px solid #ECDFCC;
}
.dc-feuille-tete h3 { margin: 4px 0 0; font-family: var(--font-display, Georgia, serif); font-size: 22px; line-height: 1.15; font-weight: 600; }
.dc-feuille-tete .dc-fermer { background: #F4EADA; color: #2A211B; flex: none; }
.dc-feuille-corps { overflow-y: auto; padding: 6px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.dc-feuille-corps h4 { margin: 18px 0 8px; font-size: 15px; font-weight: 800; color: #A23C1C; }
.dc-ings { list-style: none; margin: 0; padding: 0; }
.dc-ings li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #ECDFCC; font-size: 15px; }
.dc-ings li b { font-weight: 700; white-space: nowrap; }
.dc-rec-note { font-size: 14px; line-height: 1.5; background: #FAEFD2; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.dc-rec-mat { font-size: 14px; margin: 0 0 10px; }
.dc-etapes { margin: 0; padding: 0; list-style: none; counter-reset: dcE; }
.dc-etapes li { position: relative; padding: 0 0 14px 38px; counter-increment: dcE; }
.dc-etapes li::before {
  content: counter(dcE); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #D2552F; color: #fff; font-weight: 800; font-size: 13px;
}
.dc-etapes li b { font-size: 15px; }
.dc-etapes li small { color: #9A8B7C; font-weight: 600; }
.dc-etapes li p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #5C5046; }
.dc-astuces { background: #E3EEE4; border-radius: 14px; padding: 12px 14px; margin-top: 6px; font-size: 14px; }
.dc-astuces ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }

/* ---------- l'entrée, dans le livre ---------- */
.dc-entree {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 0 0 16px; padding: 14px 16px;
  border: 0; border-radius: 18px; cursor: pointer; text-align: left; font: inherit;
  background: linear-gradient(120deg, #2A211B 0%, #4A2F1F 100%); color: #FBF6EC;
  box-shadow: var(--shadow, 0 8px 24px -12px rgba(120,70,30,.3));
}
.dc-entree:hover { filter: brightness(1.08); }
.dc-entree-pile { position: relative; width: 44px; height: 56px; flex: none; }
.dc-entree-pile i {
  position: absolute; inset: 0; border-radius: 10px; border: 2px solid rgba(251,246,236,.9);
}
.dc-entree-pile i:nth-child(1) { background: #E89416; transform: rotate(-10deg) translateX(-4px); }
.dc-entree-pile i:nth-child(2) { background: #3E7C59; transform: rotate(6deg) translateX(4px); }
.dc-entree-pile i:nth-child(3) { background: #D2552F; display: grid; place-items: center; }
.dc-entree-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-entree-txt b { font-family: var(--font-display, Georgia, serif); font-size: 18px; font-weight: 600; }
.dc-entree-txt span { font-size: 13.5px; color: rgba(251,246,236,.78); line-height: 1.35; }
.dc-entree-fl { margin-left: auto; flex: none; opacity: .8; }

/* ---------- la visite (tutoriel de la première ouverture) ----------
   Au-dessus du calendrier (420) et sous les messages (500). Le « trou » éclaire la cible par
   une ombre géante ; le bloqueur, transparent, prend tous les clics. */
.dc-aide { font: 800 17px var(--font-display, Georgia, serif); }

.dct { position: fixed; inset: 0; z-index: 430; opacity: 0; transition: opacity .3s ease; font-family: var(--font-body, "Hanken Grotesk", system-ui, sans-serif); }
.dct.show { opacity: 1; }
.dct-bloc { position: absolute; inset: 0; }
.dct.attend .dct-bloc { cursor: pointer; }

.dct-trou {
  position: fixed; pointer-events: none; border-radius: 18px;
  box-shadow: 0 0 0 200vmax rgba(18,12,8,.74);
  transition: left .5s cubic-bezier(.22,.8,.3,1), top .5s cubic-bezier(.22,.8,.3,1),
    width .5s cubic-bezier(.22,.8,.3,1), height .5s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease;
}
.dct.leger .dct-trou { box-shadow: 0 0 0 200vmax rgba(18,12,8,.42); }
.dct-trou::before, .dct-trou::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 3px solid #F2B544; opacity: 0;
}
.dct.attend .dct-trou::before { animation: dctOnde 1.7s ease-out infinite; }
.dct.attend .dct-trou::after { animation: dctOnde 1.7s ease-out .85s infinite; }
.dct-trou:not(.sans) { outline: 3px solid rgba(242,181,68,.9); outline-offset: 2px; }
.dct-trou.sans { outline: none; }
.dct-trou.sans::before, .dct-trou.sans::after { display: none; }
.dct-trou.secoue { animation: dctSecoue .45s ease; }
@keyframes dctOnde { 0% { transform: scale(.92); opacity: .95; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes dctSecoue { 0%,100% { translate: 0; } 20% { translate: -7px; } 40% { translate: 7px; } 60% { translate: -5px; } 80% { translate: 4px; } }

/* La bulle : une fiche crème qui rebondit en entrant, avec sa flèche vers la cible. */
.dct-bulle {
  position: fixed; width: min(330px, calc(100vw - 32px));
  padding: 18px 18px 14px; border-radius: 22px;
  background: #FBF6EC; color: #2A211B;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.6) inset;
  transition: left .45s cubic-bezier(.22,.8,.3,1), top .45s cubic-bezier(.22,.8,.3,1);
}
.dct-bulle:empty { display: none; }
.dct-bulle.entre { animation: dctEntre .55s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes dctEntre { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 100% { opacity: 1; transform: none; } }
.dct-bulle[data-fleche]::after {
  content: ""; position: absolute; left: var(--fx, 50%); width: 18px; height: 18px;
  background: #FBF6EC; transform: translateX(-50%) rotate(45deg); border-radius: 3px;
}
.dct-bulle[data-fleche="haut"]::after { top: -8px; }
.dct-bulle[data-fleche="bas"]::after { bottom: -8px; }

.dct-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #D2552F; color: #fff; font: 800 15px var(--font-display, Georgia, serif);
  margin-bottom: 8px; box-shadow: 0 4px 12px rgba(210,85,47,.35);
}
.dct-num-or { background: #F2B544; color: #3A2508; box-shadow: 0 4px 12px rgba(242,181,68,.4); }
.dct-titre { margin: 0 0 6px; font: 600 21px/1.18 var(--font-display, Georgia, serif); letter-spacing: -.01em; text-wrap: balance; }
.dct-texte { margin: 0; font-size: 15px; line-height: 1.5; color: #5C5046; text-wrap: pretty; }
.dct-texte b { color: #2A211B; }
.dct-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dct-btn {
  font: inherit; font-weight: 800; font-size: 15px; padding: 12px 16px; border-radius: 999px;
  border: 1.5px solid #ECDFCC; background: transparent; color: #2A211B; cursor: pointer;
}
.dct-btn.plein { background: #D2552F; border-color: #D2552F; color: #fff; box-shadow: 0 8px 20px -8px rgba(210,85,47,.7); }
.dct-btn.plein:hover { background: #BF4A27; }
.dct-btn:active { transform: scale(.97); }
.dct-passer {
  display: block; margin: 10px auto 0; padding: 6px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: #9A8B7C; text-decoration: underline; text-underline-offset: 3px;
}
.dct :focus-visible { outline: 3px solid #F2B544; outline-offset: 2px; }

/* L'accueil : Popotam qui salue entre des étincelles. */
.dct-bulle.accueil, .dct-bulle.fin { text-align: center; width: min(350px, calc(100vw - 32px)); padding-top: 22px; }
.dct-pop { position: relative; display: block; width: 128px; margin: -64px auto 6px; }
.dct-pop.petit { width: 96px; margin-top: -52px; }
.dct-pop svg { width: 100%; height: auto; display: block; position: relative; }
.dct-bulle.accueil .dct-pop { animation: dctSaute 1s cubic-bezier(.3,1.6,.5,1) both .1s; }
.dct-bulle.fin .dct-pop { animation: dctSaute .9s cubic-bezier(.3,1.6,.5,1) both, dctFlotte 2.6s ease-in-out 1s infinite; }
@keyframes dctSaute { 0% { transform: translateY(40px) scale(.4) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dctFlotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dct-etincelles i {
  position: absolute; width: 12px; height: 12px; background: #F2B544; opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: dctEtincelle 2.2s ease-in-out infinite;
}
.dct-etincelles i:nth-child(1) { left: -10px; top: 20px; animation-delay: .5s; }
.dct-etincelles i:nth-child(2) { right: -12px; top: 8px; width: 16px; height: 16px; animation-delay: .9s; background: #D2552F; }
.dct-etincelles i:nth-child(3) { left: 6px; bottom: 10px; width: 9px; height: 9px; animation-delay: 1.3s; background: #3E7C59; }
.dct-etincelles i:nth-child(4) { right: 0; bottom: 26px; animation-delay: 1.7s; }
@keyframes dctEtincelle { 0%,100% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; transform: scale(1) rotate(90deg); } 70% { opacity: 0; transform: scale(.5) rotate(160deg); } }
.dct-bulle.bravo .dct-titre { color: #B0791C; }

/* Les dix points de la série qui se remplissent, puis la pause qui s'allume. */
.dct-points { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 14px 0 2px; }
.dct-points i { width: 16px; height: 6px; border-radius: 6px; background: #ECDFCC; animation: dctPoint .3s ease forwards; animation-delay: var(--d); }
.dct-points b {
  margin-left: 6px; font: 700 20px Caveat, cursive; color: #B0791C; opacity: 0;
  animation: dctPause .6s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: var(--d);
}
@keyframes dctPoint { to { background: #D2552F; } }
@keyframes dctPause { from { opacity: 0; transform: scale(.4) rotate(-10deg); } to { opacity: 1; transform: rotate(-4deg); } }

/* La main : elle tape, ou elle glisse vers le haut, ou vers le bas. */
.dct-main { position: fixed; width: 48px; height: 48px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.dct-main svg { width: 100%; height: 100%; display: block; }
.dct-onde { position: absolute; left: 12px; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -3px; border-radius: 50%; border: 3px solid #fff; opacity: 0; }
.dct-main.tape { animation: dctTape 1.3s ease-in-out infinite; }
.dct-main.tape .dct-onde { animation: dctOndeMain 1.3s ease-out infinite; }
@keyframes dctTape { 0%,100% { transform: translate(8px, 14px); } 35% { transform: translate(0, 0) scale(.9); } 50% { transform: translate(0, 0) scale(.9); } }
@keyframes dctOndeMain { 0%,34% { opacity: 0; transform: scale(.4); } 40% { opacity: .9; } 80%,100% { opacity: 0; transform: scale(2.4); } }
.dct-main.glisse-haut { animation: dctGlisseHaut 1.6s cubic-bezier(.5,0,.3,1) infinite; }
.dct-main.glisse-bas { animation: dctGlisseBas 1.6s cubic-bezier(.5,0,.3,1) infinite; }
.dct-main.glisse-haut::before, .dct-main.glisse-bas::before {
  content: ""; position: absolute; left: 13px; width: 8px; height: 90px; border-radius: 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.dct-main.glisse-haut::before { top: 12px; }
.dct-main.glisse-bas::before { bottom: 30px; transform: rotate(180deg); }
@keyframes dctGlisseHaut { 0% { transform: translateY(90px); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
@keyframes dctGlisseBas { 0% { transform: translateY(-90px); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(90px); opacity: 0; } }

/* Les confettis de l'étoile simulée. */
.dct-fx { position: fixed; width: 0; height: 0; pointer-events: none; }
.dct-fx i {
  position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--c);
  animation: dctConfetti .85s cubic-bezier(.2,.7,.3,1) forwards;
}
.dct-fx i:nth-child(3n) { border-radius: 50%; }
@keyframes dctConfetti { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(.3) rotate(260deg); opacity: 0; } }

/* Le calendrier en visite : on regarde, on ne touche pas. */
.poser-visite .poser-case { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .dct, .dct-trou, .dct-bulle { transition: none; }
  .dct-bulle.entre, .dct-pop, .dct-etincelles i, .dct-trou::before, .dct-trou::after, .dct-main, .dct-onde, .dct-points i, .dct-points b { animation: none !important; }
  .dct-points i { background: #D2552F; }
  .dct-points b { opacity: 1; }
  .dc { transform: none; transition: opacity .2s ease; opacity: 0; }
  .dc.show { opacity: 1; }
  .dc-feuille-in, .dc-feuille-fond, .dc-act-rond, .dc-serie i { transition: none; }
  .dc-pop-remue, .dc-act.pop .dc-act-rond, .dc-pourquoi[open] p { animation: none; }
}