/* Charte VAYANJI, alignée sur assets/landing.css (2026-08-07). Le vert #1d5c4f hérité de
   Mon Check-in a disparu : ce n'était pas une couleur de ce produit.
   --accent = INTERFACE (boutons, liens, ronds de navigation) : le vert-encre du hero.
   --green  = ACCENTS DE LECTURE (mission en italique, prénoms, chiffres) : en vert-encre ils
              seraient indistincts du texte, ils perdraient leur relief.
   --spark  = l'or, RARE par construction : halos, dernière étape, moments. Ne pas l'étendre
              aux boutons, il cesserait d'être une étincelle. */
:root{--ink:#1a1a1a;--muted:#6b6b6b;--line:#e6e2d8;--bg:#faf8f3;--accent:#101a16;--green:#2e5741;--spark:#c2853a;--sand:#f1ede4;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6}
.wrap{max-width:560px;margin:0 auto;padding:32px 22px 80px}
.brand{text-align:center;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
/* Variante LIEN du mot-marque (appHeader(), 2026-09-09) : classe séparée, PAS une modif de .brand
   elle-même -- .brand est réutilisée sur passeur.php pour un tout autre texte ("Le message d'un
   inconnu"), qui doit rester gris et non cliquable. display:block requis : .brand compte sur son
   ancien support <div> (bloc par défaut) pour son text-align:center, un <a> est inline par défaut. */
a.brand-link{display:block;text-decoration:none;color:var(--spark)}
a.brand-link:hover{text-decoration:underline}
h1{font-size:24px;margin:0 0 10px}
h2{font-size:18px;margin:0 0 10px}
p{margin:0 0 14px}
.muted{color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px}
label{display:block;font-size:14px;color:var(--muted);margin-bottom:14px}
label span{display:block;margin-bottom:5px}
/* Case a cocher avec texte a cote (acceptation des CGU) : le libelle ne doit PAS
   passer au-dessus comme un label de champ, d'ou la remise a plat de label span. */
label.check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;line-height:1.45}
label.check input{margin:2px 0 0;flex:0 0 auto;width:18px;height:18px;accent-color:var(--accent)}
label.check span{display:inline;margin:0}
/* Liens legaux en pied des pages publiques (Passeur) : discrets, bilingues. */
.legal-links{margin:34px 0 6px;text-align:center;font-size:12px;color:var(--muted)}
.legal-links a{color:var(--muted)}
input{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
/* Bouton par défaut (2026-09-08, Patrick : « je n'aime pas les boutons en noir, c'est tellement
   triste !!! ») : contour doré, fond transparent, doré plein au survol -- même langage que le CTA
   d'achat de la landing (.lp-cta, assets/landing.css), généralisé à tout le site. Remplace l'ancien
   défaut plein var(--accent). ⚠️ button.danger et .btn.alert (assets/admin.css) redéclarent leur
   propre `color` explicitement : sans ça, le texte deviendrait doré sur fond rouge/doré = illisible. */
button,.btn{display:inline-block;font:inherit;padding:11px 18px;border:1px solid var(--spark);border-radius:10px;
  background:transparent;color:var(--spark);cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
button:hover,.btn:hover{background:var(--spark);color:#fff}
.btn.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent)}
/* Bouton "moment rare" (2026-09-08) : pleine largeur + léger halo, pour LE bouton principal d'un
   écran (ex. "Envoyer en relecture") -- la couleur/bordure dorée vient déjà du défaut ci-dessus,
   ce modifier n'ajoute que la mise en page et l'emphase. Utilisation : class="btn gold" (SANS
   ghost : ghost repasserait fond blanc + texte sombre, l'inverse de ce qu'on veut ici). */
.btn.gold{display:block;width:100%;text-align:center;box-shadow:0 0 0 3px rgba(194,133,58,.14)}
/* Paire de boutons secondaires alignée (2026-09-08) : largeur égale plutôt que chacun à la taille
   de son propre texte, pour rester au carré sous le bouton doré pleine largeur au-dessus. */
.btn-pair{display:flex;gap:10px}
.btn-pair .btn{flex:1;text-align:center}
.error{background:#fcebeb;color:#a32d2d;padding:10px 14px;border-radius:10px;margin-bottom:14px}
.center{text-align:center}
.lang-toggle{display:flex;justify-content:center;gap:16px;margin:2px 0 20px}
.lang-flag{background:none;color:inherit;padding:4px 6px;border:0;border-radius:8px;font-size:26px;line-height:1;cursor:pointer;opacity:.4;filter:grayscale(1);transition:opacity .15s,filter .15s}
.lang-flag.is-active{opacity:1;filter:none}
.threshold{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.7;text-align:center}
/* Marque Vayanji entre les deux paragraphes du seuil rituel (passeur.php, 2026-09-07) : même asset
   que le marqueur de carte / l'image OG (une seule identité visuelle partout), fond transparent. */
.threshold-mark{display:block;height:64px;width:auto;margin:20px auto}
.link{color:var(--accent);background:none;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:underline}
details{margin-top:10px;color:var(--muted);font-size:14px}
summary{cursor:pointer}
.od-list{list-style:none;padding:0;margin:0}
.od-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
/* Un .od-item peut porter un formulaire (retirer un proche) : certains navigateurs donnent encore
   une marge basse par defaut au <form>, ce qui desalignerait la ligne. */
.od-item form{margin:0}
.badge{font-size:12px;padding:3px 10px;border-radius:999px;background:#f1efe8;color:var(--muted);white-space:nowrap}
.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}

/* Avatar : la porte vers le profil, et donc la SEULE vers la déconnexion (avec la redirection
   à 1 odyssée, index.php n'est plus affiché pour la plupart des Conteurs). */
.wrap{position:relative}
.ody-avatar{position:absolute;top:30px;right:20px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  border:1px solid var(--line);background:var(--sand);color:var(--accent);font-weight:600;font-size:15px}
/* Retour à la grille, en miroir de l'avatar (haut-gauche), sur la page de suivi à 2+ odyssées */
.ody-back{position:absolute;top:30px;left:20px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;line-height:1;
  border:1px solid var(--line);background:#fff;color:var(--accent);font-size:19px}

/* Tables larges : elles scrollent DANS leur carte, jamais la page (mobile-first) */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.jetons{width:100%;border-collapse:collapse;font-size:14px}
.jetons th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 8px 0;white-space:nowrap}
.jetons td{padding:10px 12px 10px 0;border-top:1px solid var(--line);white-space:nowrap}
.jetons code{font-size:13px;background:#f1efe8;padding:2px 7px;border-radius:6px}
.sep{border:0;border-top:1px solid var(--line);margin:18px 0}

/* Mobile-first : pas de zoom auto iOS (inputs >= 16px), pas de scroll horizontal */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
input,select,textarea,button{font-size:16px}
img{max-width:100%;height:auto}
textarea{width:100%;font-family:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;min-height:130px;resize:vertical}
select{width:100%;font-family:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* Carte du monde */
.ody-map{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}

/* Autocomplétion de villes */
.ville-field{position:relative}
.ville-field .ville-input{width:100%}
.ville-list{list-style:none;margin:4px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:50;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);
  max-height:240px;overflow-y:auto}
.ville-list[hidden]{display:none}
.ville-list li{padding:10px;border-radius:8px;cursor:pointer}
.ville-list li:hover{background:#f6f4ef}

/* Étapes dépliables (page de suivi Conteur / page Passeur) : un "+" par ligne */
.step,.step-plain{border-bottom:1px solid var(--line)}
.step summary,.step-plain{display:flex;align-items:center;gap:12px;padding:14px 0}
.step summary{cursor:pointer;list-style:none}
.step summary::-webkit-details-marker{display:none}
.step summary>span:first-child,.step-plain>span:first-child{flex:1 1 auto;min-width:0}
.step summary>.muted,.step-plain>.muted{flex:none;white-space:nowrap}
.step summary::after,.step-plain::after{content:'+';flex:none;width:14px;text-align:center;color:var(--muted);font-size:18px;line-height:1}
.step-plain::after{content:''}
.step[open] summary::after{content:'−'}
.step-detail{padding:2px 0 16px}
.step-detail .by{color:var(--green);font-size:14px;margin:0 0 8px}
.step-detail img{display:block;border-radius:10px;margin:0 0 8px}
.step-detail .txt{white-space:pre-line;margin:0}
.step-num{display:inline-block;min-width:18px;padding:0 5px;margin-right:6px;font-size:12px;font-weight:700;color:var(--green);background:var(--sand);border-radius:9px;text-align:center}

/* Seuils (moments de bascule de l'arc Conteur : attente, naissance, composition).
   Pas de carte, pas de bordure : ça respire sur le fond, avec le halo d'étincelle. */
.seuil{position:relative;text-align:center;padding:26px 6px 6px;margin:0 0 18px}
/* Halo ADAPTATIF : il se cale sur la hauteur du bloc (un seuil d'une ligne ne doit pas
   traîner un halo de 230px qui bave sur la carte du dessous). */
.seuil .glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(340px,100%);height:230%;max-height:240px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(194,133,58,.42),transparent 74%)}
.seuil p,.seuil h1{position:relative}
.seuil .lead{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:20px;line-height:1.55;
  color:var(--ink);margin:0 auto 10px;max-width:19em}
.seuil .sub{font-size:14.5px;color:var(--muted);margin:0 auto;max-width:26em}

/* Invite à recevoir la nouvelle sur son téléphone (notifications du Conteur).
   ⚠️ ARRIVE MASQUÉE, et c'est assets/push.js qui décide de l'afficher : lui seul sait si le
   navigateur en est capable, si la permission est déjà donnée, ou si l'on est sur un iPhone qui
   doit d'abord installer. Sans quoi elle s'afficherait à des gens qui ont déjà dit oui.
   Une carte, pas un seuil : ce n'est pas un moment de bascule, juste une proposition. */
.push-invite{position:relative;text-align:center;padding:20px;margin:0 0 18px;
  background:#fff;border:1px solid var(--line);border-radius:14px}
.push-invite[hidden]{display:none}
/* ⚠️⚠️ INDISPENSABLE, ET PAS UNE PRÉCAUTION : l'attribut hidden ne masque que par la feuille de
   style du NAVIGATEUR, et la règle d'auteur « button,.btn{display:inline-block} » la neutralise.
   Sans cette ligne, les deux boutons de l'invite s'affichent ENSEMBLE quoi que fasse le
   JavaScript, et « Me prévenir » apparaît là où l'on ne propose que l'installation (bug vécu le
   2026-08-07). Même correctif que .ville-list[hidden] plus haut. */
.push-invite [hidden]{display:none}
.push-invite .glow{position:absolute;top:0;left:50%;transform:translate(-50%,-45%);
  width:min(220px,80%);height:100px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(194,133,58,.30),transparent 72%)}
.push-invite p{position:relative;margin:0 0 14px;font-size:15px;color:var(--muted);
  margin-inline:auto;max-width:24em}
.push-invite .btn{position:relative}
/* ⚠️ TOUJOURS REMONTÉE EN TÊTE DE PAGE par push.js, installation comme notifications : posée en
   bas, elle devient introuvable dès que le contenu s'allonge, et un voyage de trente étapes la
   renvoie hors de l'écran. Elle ne s'affiche de toute façon qu'une fois, jusqu'à la réponse. */
.push-invite.is-top{border-color:var(--spark);margin-bottom:24px}

/* « Qui sera prévenu ? » : une seule question, deux réponses (toi sur ton téléphone / tes proches).
   Fusion du 2026-08-09 : deux bannières sur la page où l'on écrit un message intime, c'était une
   de trop. Le conteneur est TOUJOURS visible (il porte l'invitation des proches) ; seule l'invite
   push imbriquee s'affiche ou se masque, sous le controle de push.js. */
.qui-prevenu{position:relative;text-align:center;padding:20px;margin:0 0 18px;
  background:#fff;border:1px solid var(--line);border-radius:14px}
.qui-prevenu.is-top{border-color:var(--spark);margin-bottom:24px}
.qui-prevenu>h2{font-size:15px;margin:0 0 14px}
/* Imbriquee, l'invite push n'est plus une carte : c'est une section de celle-ci. */
.qui-prevenu .push-invite{padding:0;margin:0;background:none;border:0;border-radius:0}
.qui-prevenu .proches-line{position:relative;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.qui-prevenu .proches-line p{margin:0 0 10px;font-size:15px;color:var(--muted)}
/* ETAT REPONDU : le bloc a recu sa reponse, il cesse d'appeler. Il perd son titre-question, son
   bouton plein et sa remontee en tete (c'est push.js qui ne le remonte plus, classe is-etat).
   Il GARDE son cadre, et c'est voulu : le « battement de coeur » du suivi est lui aussi un etat,
   et il est encadre. Ce n'est donc pas la carte qui rendait le bloc insistant, c'etaient la
   question, le bouton et la place. Meme langage que .beat (fond blanc, filet, rayon 16), mais
   SANS OR : l'or est reserve aux moments, et un reglage n'en est pas un. */
.qui-prevenu.is-etat{padding:13px 16px;margin:18px 0 0;border-radius:16px}
.qui-prevenu.is-etat .proches-line{margin:0;padding-top:0;border-top:0}
.proches-etat{margin:0;font-size:13.5px;color:var(--muted)}
/* Le lien passe sur sa propre ligne : en CSS et non par un <br>, donc valable partout ou
   .proches-etat est rendu, et sans balise de presentation dans le HTML. */
.proches-etat a{display:block;margin-top:6px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* Croix « pas maintenant » (2026-08-31) : réduit le bloc au même style que .is-etat au lieu de le
   faire disparaître (voir le commentaire de quiSeraPrevenu() dans conteur/_layout.php). */
/* ⚠️ padding:0 + display:flex explicites (2026-09-08) : sans ça, ce bouton hérite du padding:11px
   18px du bouton par défaut (assets/app.css, plus haut) -- Patrick a vu un ovale mal centré au
   survol. Le flex recentre le glyphe "×" au pixel près, plus fiable que line-height seul sur un
   symbole (ses métriques optiques ne sont pas celles d'une lettre). */
.qp-close{position:absolute;top:6px;right:8px;width:28px;height:28px;padding:0;border:0;background:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
.qp-close:hover{background:var(--sand)}
.qui-prevenu.is-reduit>h2,
.qui-prevenu.is-reduit .qp-close,
.qui-prevenu.is-reduit .push-invite{display:none}
/* ⚠️ Le bouton "Inviter mes proches" reste, sinon la phrase réduite ("tu peux inviter...") ne
   proposerait plus aucun moyen de le faire (bug relevé par Patrick) -- il est seulement démoté en
   simple lien texte, même langage que .proches-etat a juste au-dessus. */
.qui-prevenu.is-reduit .proches-line .btn{display:inline;background:none;border:0;padding:0;
  color:var(--muted);font-weight:400;text-decoration:underline;text-underline-offset:2px}

/* Liste des voyages (dashboard Conteur, seulement à partir de 2 odyssées).
   Chaque voyage est un petit BATTEMENT DE CŒUR (même langage que .beat du suivi) : il montre ce
   qui vient de s'y passer, pas son état. Un état ne répond pas à « est-ce qu'il s'est passé
   quelque chose ? », qui est la seule raison pour laquelle le Conteur revient ici. */
.section-title{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}

/* Grille de cartes, 2 par ligne. La PHOTO est le sujet : c'est elle qui porte l'émotion,
   donc elle occupe le haut de la carte, pas une vignette. Sans photo, l'étincelle prend sa
   place pour que toutes les cartes se valent. */
.voyages{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.voyage-card{display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:16px}
.voyage-card.is-vivant{box-shadow:0 0 0 4px rgba(194,133,58,.06)}
/* flex:none + position:absolute sur l'image : sinon l'image impose SA hauteur intrinsèque au
   cadre et l'aspect-ratio saute, donc les cartes avec photo ne finissent pas à la même hauteur
   que celles à l'étincelle. Sorti du flux, c'est le cadre qui commande. */
.voyage-visuel{position:relative;flex:none;width:100%;aspect-ratio:4/3;overflow:hidden;background:#f6f4ef}
.voyage-visuel img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.voyage-visuel.is-vide{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(closest-side,rgba(194,133,58,.20),var(--bg))}
.voyage-visuel.is-vide svg{width:42%;max-width:66px;color:var(--spark);opacity:.9}
.voyage-corps{flex:1;display:flex;flex-direction:column;gap:5px;padding:12px 13px 13px}
.voyage-nom{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:16px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voyage-mission{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:13.5px;line-height:1.4;color:var(--green);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.voyage-quoi{margin:0;font-size:13px;line-height:1.4;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.voyage-card.is-vivant .voyage-quoi{color:var(--ink)}
.voyage-quoi .when{color:var(--spark);font-weight:600}
.voyage-compte{margin:0;font-size:12px;color:var(--muted)}
.voyage-btn{display:block;margin-top:auto;padding:9px 10px;text-align:center;font-size:14px}

/* Étiquette privée « repère perso » (2026-09-07) : volontairement mono/discrète, à l'opposé du
   serif émotionnel de .voyage-nom, pour ne jamais confondre ce repère interne avec le nom public
   montré au Passeur. Bordure en pointillés = « ceci est une surcouche, pas le produit ». */
.perso-tag{margin:2px 0 0;padding:3px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;line-height:1.5;color:var(--muted);background:var(--sand);
  border:1px dashed var(--line);border-radius:6px;overflow-wrap:anywhere}
.perso-tag code{font-family:inherit;background:none;padding:0}

/* Choix de la musique (composition Conteur) : sélection + écoute d'un extrait */
.musique-pick{list-style:none;margin:0;padding:0}
.mp-item{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;
  background:#fff;border:1px solid var(--line);border-radius:12px;transition:border-color .15s,box-shadow .15s}
.mp-item:last-child{margin-bottom:0}
.mp-item.is-active{border-color:var(--spark);box-shadow:0 0 0 3px rgba(194,133,58,.14)}
.mp-label{display:flex;align-items:center;gap:11px;flex:1;min-width:0;margin:0;padding:4px 0;
  cursor:pointer;color:var(--ink);font-size:15px}
.mp-label input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mp-dot{flex:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--line);
  transition:border-color .15s,box-shadow .15s}
.mp-item.is-active .mp-dot{border-color:var(--spark);box-shadow:inset 0 0 0 3px var(--spark)}
.mp-titre{flex:1;min-width:0}
.mp-play{flex:none;width:34px;height:34px;padding:0;border-radius:50%;
  background:#fff;border:1px solid var(--accent);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.mp-play::before{content:"";display:block;width:0;height:0;margin-left:2px;
  border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--accent)}
.mp-play.is-playing{background:var(--accent)}
.mp-play.is-playing::before{width:9px;height:9px;margin-left:0;border:0;border-radius:1px;background:#fff}

/* Clôture (cérémonie, conteur/cloturer.php) : la phrase à recopier + le lien discret depuis le suivi. */
.cloture-label{margin-bottom:8px}
.cloture-phrase{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:19px;line-height:1.4;
  color:var(--spark);text-align:center;margin:4px 0 16px;user-select:none;-webkit-user-select:none}
.cloture-input{margin-bottom:16px}
/* Bouton VERT seulement si la phrase est bonne ; grisé tant qu'elle ne l'est pas (sinon le vert par défaut
   du bouton, juste atténué par le navigateur, laissait croire qu'il était actif). */
#cloture-btn:disabled{background:#cfccc4;color:#f3f1ea;cursor:not-allowed}
.cloture-link{margin:30px 0 4px}
.cloture-link a{color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px}