/* Page publique « Découvrir » — réutilise les jetons de app.css */
.pub { max-width: 1120px; margin: 0 auto; padding: 0 1rem 3rem; }
.pub-entete { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 0; padding-top: max(.7rem, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--fond) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pub h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); justify-content: center; text-align: center; margin-bottom: 1.4rem; }
.pub h3 { font-size: 1.08rem; margin: .7rem 0 .35rem; }
.pub-section { padding: 3.2rem 0 0; }
.pub-lead { font-size: 1.08rem; color: var(--discret); max-width: 60ch; }
.pub-sur { display: inline-block; font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-doux); padding: .35rem .8rem; border-radius: 99px; margin: 0 0 1rem; }

/* Accroche */
.pub-hero { display: grid; gap: 2.5rem; align-items: center; padding-top: 2rem; }
@media (min-width: 900px) { .pub-hero { grid-template-columns: 1.15fr .85fr; padding-top: 3.5rem; } }
.pub-hero h1 { font-size: clamp(2.3rem, 1.6rem + 3.6vw, 4rem); line-height: 1.02; margin-bottom: 1rem; letter-spacing: -.025em; }
.pub-hero h1 em { color: var(--accent); font-style: italic; }
.pub-hero .actions { margin: 1.4rem 0 .6rem; }

/* Téléphone animé */
.telephone { justify-self: center; width: min(78vw, 290px); aspect-ratio: 9 / 18.5; padding: 12px; border-radius: 44px;
  background: linear-gradient(145deg, #3a2a20, #1b1410); box-shadow: 0 40px 80px -30px rgba(74, 44, 26, .55), inset 0 0 0 2px rgba(255, 255, 255, .08);
  rotate: 4deg; animation: flotte 7s ease-in-out infinite; }
.telephone-ecran { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #f6f0e6; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tel-photo { position: relative; flex: 1.1; border-radius: 20px; background: url("/static/fonds/bois_clair.jpg") center / cover; display: grid; place-items: center; overflow: hidden; }
.tel-sac { width: 46%; aspect-ratio: 1 / .9; margin-top: 18%; border-radius: 14px; background: linear-gradient(160deg, #c47a45, #a45a2c); position: relative;
  box-shadow: 0 16px 20px -12px rgba(60, 30, 10, .6); }
.tel-sac::before { content: ""; position: absolute; left: 22%; right: 22%; top: -46%; height: 60%; border: 6px solid #6b3a1c; border-bottom: 0; border-radius: 60px 60px 0 0; }
.tel-sac::after { content: ""; position: absolute; left: 42%; top: 38%; width: 16%; height: 12%; border-radius: 3px; background: #e5c36a; }
.tel-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; gap: .25rem; align-items: center; padding: .2rem .55rem; border-radius: 99px;
  background: rgba(255, 253, 249, .9); color: #ae4726; font-weight: 800; font-size: .7rem; }
.tel-badge .ico { width: 13px; height: 13px; }
.tel-carte { background: #fffdf9; border-radius: 16px; padding: 12px; box-shadow: 0 6px 16px -8px rgba(74, 44, 26, .3); border-top: 3px solid #0a8a91; }
.tel-plateforme { font-size: .62rem; font-weight: 800; color: #0a8a91; text-transform: uppercase; letter-spacing: .06em; }
.tel-titre { margin: .25rem 0 .45rem; font-weight: 800; font-size: .82rem; color: #2a211c; white-space: nowrap; overflow: hidden;
  width: 0; animation: tape 1.4s steps(28, end) .6s forwards; }
.tel-ligne { height: 7px; border-radius: 4px; background: #e8dccb; margin: 0 0 6px; transform-origin: left; transform: scaleX(0); animation: remplit .5s var(--sortie) forwards; }
.tel-ligne.l1 { animation-delay: 2s; } .tel-ligne.l2 { width: 88%; animation-delay: 2.3s; } .tel-ligne.l3 { width: 64%; animation-delay: 2.6s; }
.tel-tags { margin: .35rem 0 0; font-size: .64rem; font-weight: 700; color: #ae4726; opacity: 0; animation: apparait-simple .5s 3s forwards; }
.tel-gain { align-self: center; display: inline-flex; gap: .35rem; align-items: center; padding: .45rem .9rem; border-radius: 99px;
  background: #56672a; color: #fff; font-weight: 800; font-size: .8rem; opacity: 0; transform: scale(.7); animation: surgit-gain .6s var(--ressort) 3.6s forwards; }
.tel-gain .ico { width: 15px; height: 15px; }
@keyframes tape { to { width: 100%; } }
@keyframes remplit { to { transform: scaleX(1); } }
@keyframes apparait-simple { to { opacity: 1; } }
@keyframes surgit-gain { to { opacity: 1; transform: none; } }

/* Grilles */
.pub-grille-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.pub-carte, .pub-tuile { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-l); padding: 1.4rem; box-shadow: var(--ombre-1); }
.pub-carte p, .pub-tuile p { color: var(--discret); margin: 0; }
.pub-bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pub-bento { grid-template-columns: repeat(3, 1fr); } .pub-tuile-grande { grid-column: span 2; grid-row: span 2; } }
.pub-tuile { transition: transform var(--t-moyen) var(--sortie), box-shadow var(--t-moyen); }
.pub-tuile:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
.pub-tuile-grande { background: var(--degrade); color: #fff; border: 0; box-shadow: var(--ombre-3); display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; }
.pub-tuile-grande p { color: rgba(255, 255, 255, .92); font-size: 1.02rem; }
.pub-tuile-grande h3 { font-size: 1.5rem; }
.pub-tuile-grande .ico.grande { color: #fff; }

/* Étapes */
.pub-etapes { list-style: none; padding: 0; margin: 0 auto; max-width: 720px; display: grid; gap: 1rem; }
.pub-etapes li { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-l); padding: 1.1rem 1.2rem; }
.pub-etapes span { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-family: var(--titre); font-weight: 700; font-size: 1.3rem; color: #fff; background: var(--degrade); }
.pub-etapes h3 { margin-top: .2rem; }
.pub-etapes p { margin: 0; color: var(--discret); }
.pub-note { max-width: 720px; margin: 1.2rem auto 0; display: flex; gap: .6rem; align-items: flex-start; color: var(--ok); font-weight: 600; }
.pub-note .ico { flex: none; margin-top: 2px; }

/* Liste d'attente */
.pub-liste { max-width: 720px; margin: 0 auto; }
.pub-liste .pub-lead { text-align: center; margin: -0.6rem auto 1.4rem; }
.pub-formulaire { padding: 1.5rem; border-radius: var(--rayon-l); box-shadow: var(--ombre-2); }
.pub-groupe { border: 0; padding: 0; margin: 0 0 .6rem; }
.pub-groupe legend { font-weight: 700; font-size: .88rem; margin-bottom: .5rem; }
.pub-formulaire .case { margin-bottom: .9rem; font-weight: 500; font-size: .92rem; align-items: flex-start; }
.pub-formulaire .case input { margin-top: 2px; }
.piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pub-merci { text-align: center; padding: 2rem 1.5rem; border-radius: var(--rayon-l); background: var(--ok-doux); animation: surgit var(--t-lent) var(--ressort) both; }
.pub-merci .succes-icone { margin: 0 auto 1rem; background: var(--ok); color: #fff; }

/* FAQ, pied */
.pub-faq { max-width: 720px; margin: 0 auto; }
.pub-faq details { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: .6rem; }
.pub-faq summary { cursor: pointer; font-weight: 700; }
.pub-faq p { color: var(--discret); margin: .6rem 0 0; }
.pub-pied { text-align: center; color: var(--discret); font-size: .88rem; padding-top: 3rem; }
@media (prefers-reduced-motion: reduce) { .tel-titre { width: 100%; } .tel-ligne { transform: none; } .tel-tags, .tel-gain { opacity: 1; transform: none; } }
.pub-entete-actions { display: flex; align-items: center; gap: .8rem; }
.pub-connexion { font-weight: 700; font-size: .9rem; text-decoration: none; padding: .5rem .3rem; }