/* Tama · feuille commune de la greffe (accueil, parcours, et pages à venir).
   Base : le carnet au trait (proposition B). Pris à C : le rendez-vous du soir.
   Billes du boulier : celles du carnet de tampons de la planche de style (piste B), toujours en pleine couleur.
   Règle : toutes les couleurs sont nommées ici, dans :root, et nulle part ailleurs. */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  /* papier et encres */
  --papier: #FFF8EC; --papier-2: #FDEFD9; --blanc: #FFFFFF; --point: #2B1E2F1F;
  --encre: #2B1E2F; --encre-2: #3A2C3E; --doux: #5E4E5C;
  /* les quatre couleurs : clair, base, foncé, doux */
  --tomate-clair: #FF8A66; --tomate: #F2603E; --tomate-fonce: #B83A22; --tomate-doux: #FFE4D9;
  --soleil-clair: #FFE08A; --soleil: #FFC94D; --soleil-fonce: #D99412; --soleil-doux: #FFF0C7;
  --matcha-clair: #A6E6BE; --matcha: #6CC48F; --matcha-fonce: #3E9566; --matcha-doux: #DDF3E5;
  --sakura-clair: #FFCAD7; --sakura: #F7A8BC; --sakura-fonce: #D9738D; --sakura-doux: #FDE3EA;
  --prune: #6E5873;
  /* le tampon, le bois, la nuit */
  --tampon: #C63F25; --tampon-fond: #FFF1EC;
  --bois: #E3A56E;
  --nuit: #241829; --nuit-2: #3B2A44; --nuit-texte: #F3E6EE; --nuit-doux: #D9C9D3;
  /* Tama et le jardin (alias quand c'est possible) */
  --joue: #FF6F8E; --bouche: #7A2C2C; --langue: #FF8FA3; --tige: var(--bois); --feuille: var(--matcha); --lueur: var(--soleil-clair);
  --ciel: #E3F3FF; --herbe: #B9E0A2; --herbe-2: #9BD283; --feuillage: #7FC46C; --feuillage-clair: var(--matcha-clair);
  --bourgeon: var(--matcha-doux); --bourgeon-trait: var(--encre); --nuage: var(--blanc); --bois-fonce: #7B4A2A;
  /* ombres et voiles (encre transparente) */
  --voile: #2B1E2F66; --halo-soleil: #FFC94D40;
  --focus: var(--encre);
  /* typographie et formes */
  --display: "Fredoka", "Avenir Next Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --h1: clamp(2.5rem, 4.3vw, 3.85rem);
  --h2: clamp(2rem, 3.4vw, 2.85rem);
  --trait: 3px solid var(--encre);
  --r: 24px;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--encre); font-family: var(--body); font-size: 18px; line-height: 1.6; font-weight: 700; overflow-x: hidden;
  background: radial-gradient(var(--point) 1.4px, transparent 1.8px) 0 0 / 22px 22px, var(--papier); }
a { color: inherit; }
img, svg { display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.06; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: 1.45rem; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.doux { color: var(--doux); }
.lead { font-size: 1.2rem; color: var(--encre-2); font-weight: 600; }
.centre { text-align: center; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- bandeau de maquette ---------- */
.bandeau { background: var(--encre); color: var(--nuit-texte); font-size: .95rem; text-align: center; padding: 7px 12px; }
.bandeau b { color: var(--soleil); }

/* ---------- étiquettes, pastilles, feuilles ---------- */
.etiquette { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 600; font-size: 1.02rem; padding: 3px 14px; border: 2.5px solid var(--encre); border-radius: 999px; background: var(--soleil); color: var(--encre); }
.etiquette.sakura { background: var(--sakura); } .etiquette.matcha { background: var(--matcha); } .etiquette.tomate { background: var(--tomate); } .etiquette.blanc { background: var(--blanc); }
.pastille { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2.5px solid var(--encre); background: var(--c, var(--matcha)); position: relative; }
.pastille::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid var(--encre); opacity: .45; }
.feuille { background: var(--blanc); border: var(--trait); border-radius: var(--r); box-shadow: 0 6px 0 var(--encre); }
.scotch { position: relative; }
.scotch::before, .scotch::after { content: ""; position: absolute; top: 10px; width: 96px; height: 28px; z-index: 4; opacity: .8; border-left: 2px dashed var(--blanc); border-right: 2px dashed var(--blanc); pointer-events: none; }
.scotch::before { left: -18px; transform: rotate(-38deg); background: var(--soleil); }
.scotch::after { right: -18px; transform: rotate(38deg); background: var(--sakura); }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: var(--papier); border-bottom: var(--trait); }
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: var(--display); font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; min-height: 44px; }
.liens { display: flex; gap: 6px; margin-left: auto; align-items: center; }
/* Les règles de liens visent seulement les liens simples : le bouton garde ses couleurs (défaut de la maquette). */
.liens a:not(.btn) { text-decoration: none; font-weight: 800; font-size: 1rem; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 2.5px solid transparent; }
.liens a:not(.btn):hover { border-color: var(--encre); }
.liens a:not(.btn)[aria-current="page"] { background: var(--encre); color: var(--papier); }
.liens .btn { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; min-height: 44px; border: var(--trait); border-radius: 14px; padding: 0 18px; font: inherit; font-weight: 900; color: var(--encre); background: var(--blanc); box-shadow: 0 3px 0 var(--encre); cursor: pointer; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .liens { display: none; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--papier); border-bottom: var(--trait); padding: 10px 20px 20px; }
  .liens.open { display: flex; }
  .liens .btn { margin: 8px 0 0; }
}

/* ---------- boutons : un seul principal par écran, la pilule tomate à l'encre ---------- */
.btn { --c: var(--tomate); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border: var(--trait); border-radius: 18px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; text-align: center; text-decoration: none; color: var(--encre); background: var(--c); box-shadow: 0 6px 0 var(--encre);
  transition: transform .08s ease, box-shadow .08s ease; user-select: none; }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--encre); }
.btn.blanc { --c: var(--blanc); } .btn.soleil { --c: var(--soleil); } .btn.matcha { --c: var(--matcha); } .btn.sakura { --c: var(--sakura); }
.btn.gros { min-height: 66px; padding: 0 32px; font-size: 1.3rem; border-radius: 22px; }
.btn.petit { min-height: 46px; padding: 0 18px; font-size: 1.02rem; border-radius: 14px; box-shadow: 0 4px 0 var(--encre); }
.btn.bloc { width: 100%; }

section { padding: 92px 0; position: relative; }
.fond-2 { background: var(--papier-2); }

/* ---------- Tama présente la page : il tient l'étiquette dans sa bulle ---------- */
.annonce { display: flex; align-items: flex-end; gap: 4px; }
.annonce.centre { justify-content: center; }
.annonce .tama { animation: bob 3.4s ease-in-out infinite; }
.bulle { position: relative; background: var(--blanc); border: var(--trait); border-radius: 18px; padding: 8px 16px; font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; box-shadow: 0 4px 0 var(--encre); }
.bulle b { font-weight: 700; background: linear-gradient(transparent 55%, var(--soleil) 55%); white-space: nowrap; }
.bulle.gauche::before { content: ""; position: absolute; left: -11px; bottom: 14px; width: 18px; height: 18px; background: var(--blanc); border-left: var(--trait); border-bottom: var(--trait); transform: rotate(45deg); border-radius: 0 0 0 4px; }
.annonce .bulle { margin-bottom: 28px; }
.annonce .bulle .etiquette { border: 0; padding: 0; background: none; font-family: var(--body); font-weight: 900; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.titre-sec { display: grid; gap: 14px; max-width: 760px; }
.titre-sec.centre { margin: 0 auto 46px; justify-items: center; }
.titre-sec p { font-size: 1.18rem; color: var(--encre-2); font-weight: 600; }

/* ---------- le boulier : trait d'encre, billes du carnet de tampons (planche de style, piste B) ----------
   Les billes restent en pleine couleur, posées ou au repos : le nombre se lit à leur place sur la tige.
   Haut prune, bas tomate ; moitié basse plus foncée (l'arête nette au milieu), reflet blanc, contour d'encre. */
.sb { --sb-tige: var(--encre); --sb-barre: var(--encre); --sb-point: var(--soleil); --sb-tige-l: 4px; }
.sb-frame { padding: 12px; border-radius: 26px; background: var(--bois); border: var(--trait); box-shadow: 0 7px 0 var(--encre); }
.sb-rods { padding: 6px 4px; border-radius: 16px; background: var(--blanc); border: var(--trait); }
.sb-bead .bd-corps { fill: var(--tomate); }
.sb-bead .bd-bas { fill: var(--tomate-fonce); opacity: .45; }
.sb-bead .bd-reflet { stroke: var(--blanc); stroke-width: 4; }
.sb-bead .bd-trait { stroke: var(--encre); stroke-width: 3.5; stroke-linejoin: round; }
.sb-bead.heaven .bd-corps { fill: var(--prune); }
.sb-bead.heaven .bd-bas { fill: var(--encre); }
.sb-bead:hover .bd-corps { filter: brightness(1.04); }
.sb-bead.invite { animation: invite 2.6s ease-in-out 1.2s infinite; }
@keyframes invite { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-6px); } 86% { transform: translateY(0); } 92% { transform: translateY(-3px); } }

.lecture { text-align: center; font-family: var(--display); padding: 4px 14px 6px; min-width: 104px; background: var(--soleil); border: var(--trait); border-radius: 14px; box-shadow: 0 4px 0 var(--encre); transform: rotate(3deg); }
.lecture small { display: block; font-size: .95rem; font-weight: 700; letter-spacing: .03em; }
.lecture strong { display: inline-block; font-size: 2rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lecture strong.bump { animation: bump .35s var(--pop); }

/* ---------- barres, cartes de profil ---------- */
.barre { height: 18px; border-radius: 99px; border: 2.5px solid var(--encre); background: var(--blanc); overflow: hidden; }
.barre i { display: block; height: 100%; background: var(--c); border-right: 2.5px solid var(--encre); }

/* ---------- tampons : le signe de la marque (fait, grade, promesse) ---------- */
.rond { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; text-align: center; line-height: 1; font-family: var(--display); font-weight: 700; color: var(--doux); border: 3px dashed var(--doux); background: var(--papier); flex: none; }
.rond b { display: block; font-size: 1.8rem; }
.rond small { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.rond.fait { color: var(--tampon); border: 3px solid var(--tampon); box-shadow: inset 0 0 0 4px var(--tampon-fond), inset 0 0 0 6.5px var(--tampon); background: var(--tampon-fond); transform: rotate(var(--rot, -10deg)); }
.rond.eveil b { font-size: 1.25rem; }
.rond.dan { position: relative; }
.rond.dan::after { content: ""; position: absolute; top: -8px; right: -6px; width: 28px; height: 28px; background: var(--soleil); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* ---------- questions ---------- */
.faq { max-width: 840px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { background: var(--blanc); border: var(--trait); border-radius: 20px; padding: 0 22px; box-shadow: 0 5px 0 var(--encre); }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 72px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; border: var(--trait); background: var(--soleil); transition: transform .3s var(--pop); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--sakura); }
.faq details p { padding: 0 0 22px; color: var(--encre-2); font-weight: 600; max-width: 46em; }

/* ---------- la nuit : appel final et pied de page (le rendez-vous du soir, pris à C) ---------- */
.nuit { background: var(--nuit); color: var(--nuit-texte); }
.ciel { background:
  radial-gradient(circle at 82% 14%, var(--soleil-clair) 0 1.5px, transparent 2px), radial-gradient(circle at 64% 24%, var(--soleil-clair) 0 1px, transparent 1.6px),
  radial-gradient(circle at 92% 44%, var(--soleil-clair) 0 1.2px, transparent 1.8px), radial-gradient(circle at 8% 30%, var(--soleil-clair) 0 1px, transparent 1.6px),
  radial-gradient(circle at 30% 10%, var(--soleil-clair) 0 1.3px, transparent 1.8px), radial-gradient(circle at 46% 80%, var(--nuit-doux) 0 1px, transparent 1.6px),
  radial-gradient(circle at 16% 70%, var(--soleil-clair) 0 1.2px, transparent 1.8px), var(--nuit); }
.nuit .btn { border-color: var(--nuit); box-shadow: 0 6px 0 var(--soleil-fonce), 0 0 0 6px var(--halo-soleil); --c: var(--soleil); }
.nuit .btn:active { box-shadow: 0 1px 0 var(--soleil-fonce); }
footer { padding: 44px 0 58px; font-size: 1rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
footer .logo { color: var(--nuit-texte); font-size: 1.4rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }
footer nav a { text-decoration: none; font-weight: 800; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Tama vivant ---------- */
.tama .tama-eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.tama .tama-leaf { transform-box: fill-box; transform-origin: 0% 100%; }
.wiggle .tama-leaf { animation: leaf .6s var(--pop); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 14px; height: 9px; border-radius: 50%; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes leaf { 0% { transform: rotate(0); } 40% { transform: rotate(-22deg); } 100% { transform: rotate(0); } }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-width: 560px) {
  section { padding: 70px 0; }
  .btn.gros { font-size: 1.2rem; padding: 0 16px; }
}
/* Téléphone court (830 px de haut et moins) : bandeau et barre plus serrés, mêmes tailles de texte. */
@media (max-width: 560px) and (max-height: 830px) {
  .bandeau { padding: 5px 12px; line-height: 1.35; }
  .nav .wrap { height: 60px; }
  .liens { top: 60px; }
}