/* Retour utilisateur du 2026-10-05 : "inspire toi de ce que j'ai deja fait".
   La page publique garde son défilement naturel, indépendamment de l'appli. */
.page-publique { --pub-accent-encre: #17251f; height: auto; }
.page-publique .pub-largeur { width: min(100% - 40px, 1080px); margin-inline: auto; }
.page-publique a { text-decoration: none; }
.page-publique .pub-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 20px; }
.page-publique .pub-marque { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.05em; }
.page-publique .pub-marque svg { width: 31px; height: 31px; }
.page-publique .pub-connexion { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 12px; min-height: 44px; }
.page-publique .pub-repere { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 20px; }
.page-publique h1, .page-publique h2, .page-publique h3 { font-weight: 500; letter-spacing: -.055em; }
.page-publique .pub-hero { padding-block: 34px 64px; display: grid; gap: 38px; }
.page-publique h1 { font-size: clamp(40px, 10.8vw, 58px); line-height: 1.08; margin: 0 0 24px; }
.page-publique h1 span, .page-publique .pub-final h2 span { color: var(--accent); }
.page-publique .pub-promesse { font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.page-publique .pub-description { max-width: 390px; font-size: 14px; line-height: 1.75; color: var(--ink-muted); margin: 0 0 26px; }
.page-publique .pub-action { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 54px; padding: 15px 22px; background: var(--accent); color: var(--pub-accent-encre); border-radius: 32px; font-size: 14px; font-weight: 600; width: fit-content; }
.page-publique .pub-action span { font-size: 20px; }
.page-publique .pub-action:hover { filter: brightness(1.08); }
.page-publique .pub-decouvrir { display: inline-flex; align-items: center; gap: 18px; min-height: 48px; margin-top: 6px; color: var(--ink-muted); font-size: 12px; }
.page-publique .pub-extrait { background: var(--surface); padding: 22px; border-radius: 25px; border: 1px solid var(--border); max-width: 420px; }
.page-publique .pub-extrait-haut { display: flex; align-items: center; justify-content: space-between; color: var(--accent); font-size: 11px; }
.page-publique .pub-extrait-haut > span:last-child { font-size: 25px; }
.page-publique .pub-identite { display: flex; gap: 14px; align-items: center; margin: 23px 0; }
.page-publique .pub-initiale { width: 58px; height: 64px; border-radius: 30px 30px 15px 15px; background: #45483e; color: #f3eee8; display: grid; place-items: center; font-size: 26px; }
.page-publique .pub-prenom { font-size: 19px; margin: 0 0 5px; letter-spacing: -.03em; }
.page-publique .pub-ville, .page-publique .pub-question { color: var(--ink-muted); font-size: 12px; margin: 0; }
.page-publique blockquote { margin: 12px 0 23px; font-size: clamp(23px, 6vw, 30px); line-height: 1.4; letter-spacing: -.035em; }
.page-publique .pub-extrait-bas { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 17px; font-size: 12px; color: var(--ink-muted); }
.page-publique .pub-coeur { color: var(--accent); font-size: 29px; }
.page-publique .pub-fictif { font-size: 10px; color: var(--ink-muted); margin: 14px 0 0; }
.page-publique h2 { font-size: clamp(29px, 7.5vw, 42px); line-height: 1.15; margin: 0 0 22px; }
.page-publique .pub-intention { padding-block: 40px 52px; border-top: 1px solid var(--border); }
.page-publique .pub-intention > p:not(.pub-repere), .page-publique .pub-humain p:not(.pub-repere) { font-size: 15px; line-height: 1.85; color: var(--ink-muted); max-width: 610px; }
.page-publique .pub-signature { padding-top: 16px; font-size: 15px; line-height: 1.8; }
.page-publique .pub-signature span { color: var(--accent); }
.page-publique .pub-parcours { padding-block: 32px 56px; scroll-margin-top: 24px; }
.page-publique .pub-moments { display: grid; gap: 36px; margin-top: 34px; }
.page-publique .pub-numero { font-size: 12px; color: var(--accent); }
.page-publique h3 { font-size: 26px; line-height: 1.2; margin: 12px 0 16px; }
.page-publique .pub-moment > p { font-size: 14px; color: var(--ink-muted); line-height: 1.8; margin: 0 0 20px; }
.page-publique .pub-apercu { background: var(--surface); border-radius: 20px; padding: 22px; min-height: 205px; display: flex; flex-direction: column; justify-content: space-between; }
.page-publique .pub-petit-repere { font-size: 11px; color: var(--accent); }
.page-publique .pub-apercu > p { font-size: 20px; line-height: 1.5; letter-spacing: -.025em; margin: 20px 0; }
.page-publique .pub-legende { font-size: 10px; line-height: 1.6; color: var(--ink-muted); }
.page-publique .pub-conversation .pub-bulle { font-size: 13px; letter-spacing: 0; border-radius: 13px 13px 13px 3px; background: var(--surface-vive); padding: 12px; margin: 17px 20px 0 0; }
.page-publique .pub-conversation .pub-bulle-moi { background: var(--accent); color: var(--pub-accent-encre); border-radius: 13px 13px 3px 13px; align-self: flex-end; margin: 9px 0 16px; }
.page-publique .pub-details { border-bottom: 1px solid var(--border); }
.page-publique .pub-details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; padding-block: 18px; font-size: 14px; line-height: 1.6; }
.page-publique .pub-details summary::-webkit-details-marker { display: none; }
.page-publique .pub-details summary > span { font-size: 24px; font-weight: 400; color: var(--accent); flex-shrink: 0; }
.page-publique .pub-details[open] summary > span { transform: rotate(45deg); }
.page-publique .pub-details p, .page-publique .pub-details li { font-size: 14px; line-height: 1.8; color: var(--ink-muted); }
.page-publique .pub-details p { margin: 0 0 22px; max-width: 700px; }
.page-publique .pub-details ol { padding-left: 22px; margin: 0 0 22px; }
.page-publique .pub-details li { padding: 5px 0 5px 7px; }
.page-publique .pub-details strong { font-weight: 500; color: var(--ink); }
.page-publique .pub-parcours-detail { margin-top: 24px; border-top: 1px solid var(--border); }
.page-publique .pub-humain { background: var(--surface); border-radius: 25px; padding: 30px 24px; display: grid; gap: 16px; }
.page-publique .pub-humain-signe svg { width: 70px; height: 70px; }
.page-publique .pub-humain .pub-repere { margin-bottom: 16px; }
.page-publique .pub-humain p:last-child { margin-bottom: 0; }
.page-publique .pub-questions { padding-block: 65px 50px; }
.page-publique .pub-questions h2 { max-width: 530px; }
.page-publique .pub-final { padding-block: 36px 60px; }
.page-publique .pub-final .pub-action { margin-top: 28px; }
.page-publique .pub-final > p:last-child { font-size: 12px; color: var(--ink-muted); line-height: 1.7; margin-top: 18px; }
.page-publique .pub-footer { border-top: 1px solid var(--border); padding-block: 25px 32px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.page-publique .pub-footer > span { font-size: 11px; color: var(--ink-muted); margin-left: auto; }
.page-publique .pub-footer > div { display: flex; gap: 22px; width: 100%; }
.page-publique .pub-footer > div a { color: var(--ink-muted); font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.page-publique :is(a,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.page-publique .pub-saut { position: absolute; top: -100px; left: 20px; padding: 14px; background: var(--accent); color: var(--pub-accent-encre); z-index: 2; }
.page-publique .pub-saut:focus { top: 12px; }
@media (min-width: 760px) {
  .page-publique .pub-largeur { width: min(100% - 80px, 1080px); }
  .page-publique .pub-nav { padding-block: 24px; }
  .page-publique .pub-marque { font-size: 20px; }
  .page-publique .pub-connexion { font-size: 14px; }
  .page-publique .pub-hero { padding-block: 65px 90px; }
  .page-publique h1 { font-size: clamp(55px, 5.8vw, 76px); }
  .page-publique .pub-extrait { padding: 30px; }
  .page-publique .pub-intention { padding-block: 64px; }
  .page-publique .pub-moments { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
  .page-publique .pub-moment { display: flex; flex-direction: column; }
  .page-publique .pub-apercu { margin-top: auto; min-height: 245px; padding: 20px; }
  .page-publique .pub-parcours { padding-block: 36px 80px; }
  .page-publique .pub-humain { grid-template-columns: 150px 1fr; align-items: center; padding: 50px; gap: 35px; }
  .page-publique .pub-humain-signe svg { width: 130px; height: 130px; }
  .page-publique .pub-questions { padding-block: 85px 60px; }
  .page-publique .pub-final { padding-block: 30px 85px; }
  .page-publique .pub-final h2 { font-size: 51px; }
  .page-publique .pub-footer > div { width: auto; }
}

/* Retour utilisateur du 2026-10-06 : carrousel d'un profil fictif dans le haut de la page publique.
   Réutilise principe.css/principe.js ; marges adaptées aux 20px de .pub-largeur et en-tête plus compact. */
.page-publique .pub-hero > * { min-width: 0; }
.page-publique .pub-exemple { margin: 0 -20px; }
.page-publique .pub-exemple .principe-piste { padding-inline: 20px; scroll-padding-left: 20px; }
.page-publique .pub-exemple .principe-piste::after { display: none; }
.page-publique .pub-exemple .principe-entete { min-height: 0; padding-bottom: 12px; }
.page-publique .pub-exemple .principe-entete h3 { font-size: 19px; margin: 6px 0 0; }
.page-publique .pub-exemple .principe-commandes, .page-publique .pub-exemple .principe-note { padding-inline: 20px; }
@media (min-width: 760px) {
  .page-publique .pub-exemple { margin: 0; }
  .page-publique .pub-exemple .principe-piste { padding-inline: 0; scroll-padding-left: 0; }
  .page-publique .pub-exemple .principe-commandes, .page-publique .pub-exemple .principe-note { padding-inline: 0; }
  .page-publique .pub-exemple .principe-etape { flex-basis: 300px; }
}

/* Retour utilisateur du 2026-10-06 : "il manquerait pas un peu de couleurs" — variante B retenue : un corail doux en
   seconde couleur (jamais de jaune/doré), le vert menthe reste la couleur principale du reste de l'app. */
.page-publique { --corail: var(--accent); --pub-encre-corail: var(--pub-accent-encre); }
.page-publique .pub-repere, .page-publique .pub-details summary > span { color: var(--corail); }
.page-publique h1 span, .page-publique .pub-final h2 span { color: var(--corail); }
.page-publique .pub-numero { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--corail); color: var(--pub-encre-corail); font-weight: 700; }
.page-publique .pub-moment { border-left: 2px solid rgba(140, 203, 176, .55); padding-left: 18px; }
.page-publique .pub-final { background: linear-gradient(150deg, rgba(140, 203, 176, .22), rgba(140, 203, 176, .04) 80%); border-radius: 26px; padding: 36px 24px; margin-bottom: 40px; }
.page-publique .pub-action { background: var(--corail); color: var(--pub-encre-corail); }
.page-publique .principe-note { color: var(--ink-muted); }.page-publique .pub-exemple .principe-numero, .page-publique .pub-exemple .principe-position { color: var(--corail); }

/* Retour utilisateur du 2026-10-07 : bouton S'inscrire juste sous « Se connecter », en haut à droite. */
.page-publique .pub-acces { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.page-publique .pub-inscription { display: inline-flex; align-items: center; min-height: 36px; padding: 0 18px; border-radius: 999px; background: var(--corail); color: var(--pub-encre-corail); font-size: 13px; font-weight: 600; }
.page-publique .pub-inscription:hover { filter: brightness(1.08); }

/* Retour utilisateur du 2026-10-07 : le principe vient avant les trois captures — le carrousel a quitté le haut de la page. */
.page-publique .pub-exemple-section { padding-block: 24px 56px; }