/* Espace personnel : mêmes couleurs, polices et signes que la page d'accueil.
   La jauge de points reprend le point du logo : un point par chance au tirage. */
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --fond: #F4EFE6; --surface: #FBF8F2; --lin: #E7DFD2; --latte: #DCE3CF; --aplat: #A7B897;
  --accent: #8FA37A; --profond: #1F3A2B; --texte2: #635C50;
  --trait: rgba(31, 58, 43, .14); --trait-fort: rgba(31, 58, 43, .3); --ombre: rgba(31, 58, 43, .2);
  --attention: #D2A24A; --attention-texte: #835B14; --attention-doux: #F4E8CA; --erreur-texte: #9A4F3B;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --gouttiere: clamp(20px, 5vw, 32px);
  --doux: cubic-bezier(.2, .8, .2, 1);
  --rapide: 140ms; --normal: 220ms;
  color-scheme: light;
}
:root[data-marque="lucide"] {
  --fond: #F5F0F1; --surface: #FCF9FA; --lin: #E9E1E6; --latte: #E4D8EE; --aplat: #B9A2CC;
  --accent: #9A72C0; --profond: #3D2750; --texte2: #625767;
  --trait: rgba(61, 39, 80, .14); --trait-fort: rgba(61, 39, 80, .3); --ombre: rgba(61, 39, 80, .22);
  --attention: #D09C45; --attention-texte: #80591A; --attention-doux: #F5E8CF; --erreur-texte: #97474C;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--profond);
  font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.conteneur { width: 100%; max-width: 640px; margin-inline: auto; padding-inline: var(--gouttiere); }
:root[data-chargement] main { visibility: hidden; }

/* ——— Logo et points de la marque ——— */
.logo { display: inline-flex; align-items: baseline; font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: -.005em; color: var(--profond); white-space: nowrap; text-decoration: none; }
.logo__i { position: relative; display: inline-block; }
.logo__point { position: absolute; left: 50%; top: .18em; width: .17em; height: .17em; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }
.point-final { display: inline-block; width: .17em; height: .17em; margin-left: .07em; border-radius: 50%; background: var(--accent); }
.pour-lucide { display: none; }
:root[data-marque="lucide"] .pour-lucide { display: revert; }
:root[data-marque="lucide"] .pour-alicia { display: none; }

/* ——— En-tête ——— */
.entete { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--fond) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--normal); }
.entete.est-defile { border-bottom-color: var(--trait); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.langues { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--trait-fort); }
.langues button { min-width: 38px; height: 34px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--texte2); font: 500 12.5px/1 var(--sans); letter-spacing: .1em; cursor: pointer; transition: background-color var(--rapide), color var(--rapide); }
.langues button[aria-pressed="true"] { background: var(--profond); color: var(--fond); }

/* ——— Boutons et champs ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; font: 500 16px/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 90ms var(--doux), background-color var(--rapide), box-shadow var(--rapide); touch-action: manipulation; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--principal { background: var(--profond); color: var(--fond); }
.btn--principal:hover { background: color-mix(in srgb, var(--profond) 86%, var(--accent)); }
.btn--contour { background: transparent; color: var(--profond); box-shadow: inset 0 0 0 1.5px var(--trait-fort); }
.btn--contour:hover { box-shadow: inset 0 0 0 1.5px var(--profond); }
.btn--petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--plein { width: 100%; }
.lien-discret { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.champ { width: 100%; min-width: 0; min-height: 54px; padding: 0 20px; border: 1.5px solid var(--trait-fort); border-radius: 999px; background: var(--surface); color: var(--profond); font: 400 16px/1.2 var(--sans); outline: none; transition: border-color var(--rapide), box-shadow var(--rapide); }
.champ::placeholder { color: var(--texte2); opacity: .85; }
.champ:focus { border-color: var(--profond); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent); }
.champ[aria-invalid="true"] { border-color: var(--erreur-texte); }
textarea.champ { min-height: 96px; padding: 14px 18px; border-radius: 18px; resize: vertical; line-height: 1.5; }
.choix-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.choix { min-height: 42px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--surface); color: var(--profond); font: 500 14.5px/1.2 var(--sans); cursor: pointer; transition: background-color var(--rapide), border-color var(--rapide); }
.choix:hover { border-color: var(--trait-fort); }
.choix[aria-pressed="true"] { background: var(--latte); border-color: var(--profond); }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--texte2); cursor: pointer; }
.case input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--profond); }
.erreur { font-size: 14px; font-weight: 500; color: var(--erreur-texte); }

/* ——— Typographie de l'espace ——— */
.surtitre { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--texte2); }
.bonjour { margin-top: 10px; font-size: clamp(2.5rem, 2rem + 2.4vw, 3.3rem); line-height: 1.02; letter-spacing: -.012em; }
.chapo { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--texte2); }
.titre-section { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.1rem); line-height: 1.08; letter-spacing: -.01em; }
.texte { font-size: 15.5px; line-height: 1.6; color: var(--texte2); }
.petit { font-size: 13.5px; line-height: 1.55; color: var(--texte2); }

/* ——— Rythme : des sections séparées par un trait, pas des cartes ——— */
.haut { padding-block: 28px 30px; }
.section { padding-block: 34px; border-top: 1px solid var(--trait); }
.section__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section__tete .surtitre { margin: 0; }

/* ——— La jauge : 1 point pour toi, puis 10 points d'invitation ——— */
.chances { display: flex; align-items: flex-end; gap: 14px; margin: 14px 0 22px; }
.chances__nombre { font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums; font-size: clamp(4.6rem, 3.6rem + 4vw, 6rem); line-height: .8; letter-spacing: -.02em; }
.chances__libelle { padding-bottom: 6px; font-size: 16px; line-height: 1.35; }
.chances__libelle span { display: block; color: var(--texte2); font-size: 14px; }

.jauge { --d: 22px; --g: 9px; display: flex; align-items: flex-start; gap: calc(var(--g) * 2.6); }
.jauge__groupe { display: flex; gap: var(--g); }
.jauge__cran { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; width: var(--d); }
.jauge__point { position: relative; width: var(--d); height: var(--d); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--trait-fort); }
.jauge__point.est-gagne { background: var(--accent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08), inset 0 2px 1px rgba(255, 255, 255, .35); }
.jauge__point.est-attente { box-shadow: none; }
.jauge__point.est-attente::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--attention); }
.jauge__point.est-toi { background: var(--profond); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .18); }
.jauge__repere { font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1; color: var(--texte2); font-variant-numeric: tabular-nums; }
.jauge__repere.est-atteint { color: var(--profond); }
.jauge__point.est-nouveau { animation: tombe .7s var(--doux) both; }
@keyframes tombe {
  0% { transform: translateY(-44px); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  78% { transform: translateY(-6px); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  100% { transform: translateY(0); }
}
.jauge__legende { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--texte2); }
.jauge__legende b { font-weight: 500; color: var(--profond); }
.prochain { position: relative; margin-top: 20px; padding: 18px 0 0 20px; border-top: 1px dashed var(--trait-fort); font-size: 15.5px; line-height: 1.5; }
.prochain::before { content: ""; position: absolute; left: 0; top: calc(18px + .5em); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.prochain b { font-weight: 500; }
.jeu-liens { margin-top: 14px; font-size: 13.5px; color: var(--texte2); }

/* ——— Partage : le seul bloc en relief, parce qu'on agit dedans ——— */
.partage { padding: 18px; border-radius: 20px; background: var(--lin); }
.partage__lien { display: flex; gap: 8px; align-items: center; }
.partage__lien code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; padding: 13px 14px; border-radius: 14px; background: var(--surface); font: 500 14px/1.2 var(--sans); user-select: all; }
.partage__canaux { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 14px; }
.partage__canaux a { color: var(--profond); }
.partage__regle { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--texte2); }

/* ——— Les invitations ——— */
.compteurs { font-size: 14px; color: var(--texte2); white-space: nowrap; }
.invites { list-style: none; margin: 0; padding: 0; }
.invite { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.invite:first-child { border-top: 1px solid var(--trait); }
.invite__initiale { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lin); font: 500 19px/1 var(--serif); }
.invite__nom { font-weight: 500; line-height: 1.3; }
.invite__date { font-size: 13px; color: var(--texte2); }
.invite__statut { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.invite__statut i { width: 10px; height: 10px; border-radius: 50%; }
.invite--confirmee .invite__statut i { background: var(--accent); }
.invite--attente .invite__statut { color: var(--attention-texte); }
.invite--attente .invite__statut i { border: 1.5px dashed var(--attention); }
.invite--refusee .invite__statut { color: var(--texte2); font-weight: 400; }
.invite--refusee .invite__statut i { background: var(--trait-fort); }
.invites__plus { padding-top: 12px; font-size: 13.5px; color: var(--texte2); }
.conseil { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--attention-doux); color: var(--attention-texte); font-size: 14.5px; line-height: 1.5; }
.conseil::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; border: 1.5px dashed var(--attention); }
.vide { padding: 18px 0 4px; font-size: 15.5px; line-height: 1.6; color: var(--texte2); }
.distinction { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 9px 14px 9px 12px; border-radius: 999px; background: var(--latte); font-size: 14px; font-weight: 500; }
.distinction::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ——— Les paliers : un fil vertical, comme les étapes d'une routine ——— */
.paliers { list-style: none; margin: 0; padding: 0; }
.palier { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.palier:last-child { padding-bottom: 0; }
.palier::before { content: ""; position: absolute; left: 10.25px; top: 26px; bottom: 2px; width: 1.5px; background: var(--trait); }
.palier:last-child::before { display: none; }
.palier.est-atteint::before { background: var(--accent); }
.palier__marque { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--trait-fort); }
.palier.est-atteint .palier__marque { background: var(--accent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }
.palier.est-prochain .palier__marque { box-shadow: inset 0 0 0 2px var(--profond); }
.palier__seuil { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--texte2); }
.palier__titre { margin-top: 3px; font-size: 16.5px; font-weight: 500; line-height: 1.35; }
.palier__texte { margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--texte2); }
.palier__etat { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.palier.est-atteint .palier__etat { background: var(--latte); }
.palier.est-prochain .palier__etat { background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.palier:not(.est-atteint):not(.est-prochain) .palier__titre { color: color-mix(in srgb, var(--profond) 72%, var(--fond)); }

/* ——— Place dans la liste : l'étiquette d'apothicaire ——— */
.place { display: flex; align-items: center; gap: 18px; }
.etiquette-numero { display: inline-flex; flex: none; align-items: baseline; gap: 6px; margin: 4px; padding: 8px 14px 7px; border: 1px solid var(--profond); outline: 1px solid var(--profond); outline-offset: 3px; border-radius: 3px; font-family: var(--serif); font-variant-numeric: lining-nums; line-height: 1; }
.etiquette-numero small { font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.etiquette-numero strong { font-size: 34px; font-weight: 500; }

/* ——— Aller plus loin : des blocs qu'on ouvre pour répondre ——— */
.offres { display: grid; gap: 12px; }
.offre { padding: 18px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait); }
.offre__titre { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.15; }
.offre__texte { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--texte2); }
.offre__action { margin-top: 14px; }
.offre__form { display: grid; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--trait); }
.offre__question { display: block; margin-bottom: 9px; font-size: 14.5px; font-weight: 500; }
.offre__question span { font-weight: 400; color: var(--texte2); }
.offre__fait { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14.5px; font-weight: 500; }
.offre__fait::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* ——— Réglages et pied ——— */
.reglages { display: grid; gap: 16px; }
.pied { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-block: 28px 48px; border-top: 1px solid var(--trait); font-size: 14px; color: var(--texte2); }
.effacer { display: grid; gap: 12px; margin-top: 4px; padding: 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait-fort); font-size: 14.5px; line-height: 1.5; }
.effacer__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn--danger { background: var(--erreur-texte); color: #fff; }

/* ——— Connexion ——— */
.connexion { padding-block: 40px 56px; }
.connexion form { display: grid; gap: 10px; margin-top: 24px; }
.connexion .petit { margin-top: 18px; }
.alerte { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--attention-doux); color: var(--attention-texte); font-size: 14.5px; line-height: 1.5; }

/* ——— Petits messages ——— */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content; display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: 16px; background: var(--profond); color: var(--fond); font-size: 14.5px; font-weight: 500; box-shadow: 0 18px 40px -16px var(--ombre); }
.toast i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

@media (min-width: 720px) {
  .jauge { --d: 30px; --g: 13px; }
  .haut { padding-block: 44px 38px; }
  .section { padding-block: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .jauge__point.est-nouveau { animation: none; }
  .btn { transition: none; }
}

/* Vérification anti-robots : rien ne s'affiche, sauf si Turnstile demande de cocher une case */
.verif-humain.est-visible { margin: 14px 0 0; }