/* ------------------------------------------------------------------
   KAIROS - feuille de style
   Charte : Playfair Display + Montserrat, vert sauge / rose poudre /
   sable / or doux. Voir Guide de marque Volume 1, page 06.
   ------------------------------------------------------------------ */

:root {
  --vert: #4E7263;
  --vert-txt: #3B5B4D;
  --vert-clair: #5A8070;
  --rose: #C97C89;
  --rose-fonce: #B05467;
  --rose-sombre: #8E4354;
  --sable: #EADCCB;
  --or: #C9A96A;
  --ivoire: #FBF6F1;
  --blanc: #FFFFFF;
  --encre: #23302B;
  --encre-2: #5E6B64;
  --gris: #8B948E;
  --bord: #EDE0D6;
  --bord-2: #F2E8DF;
  --tint-vert: #E7EDE6;
  --tint-rose: #F3E7E7;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --script: 'Parisienne', cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--sans);
  color: var(--encre);
  background: #E6E1DA;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/* Le telephone : plein ecran sur mobile, cadre centre sur grand ecran */
#app {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  max-height: 100vh;
  background: var(--ivoire);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Sur le telephone, rien de gris ne doit jamais apparaitre autour de l'app */
@media (max-width: 559px) {
  body { background: var(--ivoire); }
}

/* iOS 26, app ouverte depuis l'ecran d'accueil (WebKit 301108) : tant que
   la page est moins haute que l'ecran, iOS la raccourcit de la hauteur de
   la barre d'etat (59 pt) et ne dessine rien en dessous : bande vide sous
   les onglets. Une page au moins aussi haute que l'ecran recoit toute la
   hauteur. Agrandir l'app elle-meme ne suffit pas (les onglets sont coupes).
   min(100lvh, ...) evite que la page defile avec une barre d'etat opaque
   (WebKit 316008). Sans encoche (inset nul), la regle ne change rien. */
@media (display-mode: standalone) {
  html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); }
}

@media (min-width: 560px) and (min-height: 760px) {
  body { padding: 24px; }
  #app {
    height: 860px;
    border-radius: 44px;
    box-shadow: 0 24px 70px rgba(35, 48, 43, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}

/* ---------- ecrans ---------- */

.ecran {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ivoire);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
}

.ecran.sombre { background: var(--vert); }

.ecran-entre { animation: entre 0.34s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.ecran-sort  { animation: sort 0.24s ease both; }

@keyframes entre { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes sort  { from { opacity: 1; } to { opacity: 0; transform: translateX(-12px); } }

@media (prefers-reduced-motion: reduce) {
  .ecran-entre, .ecran-sort, .apparait { animation: none; }
}

.corps { flex: 1 1 auto; padding: 0 26px; }
.corps.centre { display: flex; flex-direction: column; justify-content: center; }
.bas { padding: 16px 26px calc(28px + env(safe-area-inset-bottom)); }

/* ---------- typographie ---------- */

h1 { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.26; margin: 0; }
h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.35; margin: 0; }
p  { margin: 0; font-size: 13px; line-height: 1.7; color: var(--encre-2); }

.sur-titre { font-size: 10px; letter-spacing: 0.18em; color: var(--rose-fonce); margin: 0 0 10px; text-transform: uppercase; }
.etiquette { font-size: 10px; letter-spacing: 0.14em; color: var(--gris); text-transform: uppercase; }
.script { font-family: var(--script); font-size: 27px; line-height: 1.35; color: var(--rose-fonce); }
.citation { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.65; color: var(--encre); }
.mini { font-size: 11px; line-height: 1.6; color: var(--gris); }
.centre-txt { text-align: center; }

/* ---------- logo ---------- */

.logo { display: flex; align-items: center; justify-content: center; gap: 6px; }
.logo img { display: block; }
.logo.clair { flex-direction: column; gap: 14px; }
.logo span { font-family: var(--serif); letter-spacing: 0.2em; color: var(--vert); }
.logo.clair span { color: var(--ivoire); }
.baseline { font-size: 8px; letter-spacing: 0.26em; line-height: 2; text-align: center; color: var(--gris); margin-top: 14px; }
.baseline.clair { color: rgba(251, 246, 241, 0.72); }

/* ---------- boutons ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 16px;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  text-decoration: none;
}
.btn:active { transform: scale(0.975); filter: brightness(0.95); }
.btn-rose { background: var(--rose-fonce); color: #fff; }
.btn-vert { background: var(--vert); color: var(--ivoire); }
.btn-clair { background: var(--blanc); color: var(--encre); border: 1px solid var(--bord); }
.btn-contour-clair { background: transparent; color: var(--ivoire); border: 1px solid rgba(251, 246, 241, 0.45); }
.btn-fantome { background: none; border: none; color: var(--encre-2); font-size: 12.5px; min-height: 46px; width: 100%; font-family: var(--sans); cursor: pointer; }
.btn.petit { min-height: 44px; padding: 11px 16px; font-size: 13px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn + .btn { margin-top: 10px; }

/* ---------- entete ---------- */

.entete { display: flex; align-items: center; gap: 12px; padding: 22px 20px 4px; flex: 0 0 auto; }
.retour {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -10px;
  border: none; background: none; color: var(--encre); cursor: pointer;
}
.entete-titre { flex: 1; text-align: center; font-size: 10px; letter-spacing: 0.18em; color: var(--gris); text-transform: uppercase; }

.jauge { flex: 1; height: 3px; border-radius: 2px; background: var(--bord); overflow: hidden; }
.jauge > i { display: block; height: 3px; border-radius: 2px; background: var(--rose-fonce); transition: width 0.4s ease; }

/* ---------- cartes ---------- */

.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: 20px; padding: 18px; }
.carte + .carte { margin-top: 10px; }
.carte-vert { background: var(--tint-vert); border: none; border-radius: 18px; padding: 15px 17px; }
.carte-rose { background: var(--tint-rose); border: none; border-radius: 18px; padding: 15px 17px; }

.ligne { display: flex; align-items: center; gap: 13px; }
.ligne > .txt { flex: 1; }
.ligne > .txt > span { display: block; }

/* Une icone a cote d'un long texte ne doit jamais etre ecrasee */
svg { flex-shrink: 0; }
.ligne .t1 { font-size: 13px; font-weight: 500; color: var(--encre); }
.ligne .t2 { font-size: 11px; color: var(--encre-2); margin-top: 3px; }

.rond {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
}
.rond.vert { background: var(--tint-vert); color: var(--vert); }
.rond.rose { background: var(--tint-rose); color: var(--rose-fonce); }

.puce { display: inline-block; font-size: 11px; border-radius: 999px; padding: 7px 13px; }
.puce.vert { background: var(--tint-vert); color: var(--vert-txt); }
.puce.contour { border: 1px solid var(--bord); color: var(--encre-2); }
.puce.rose { background: var(--tint-rose); color: var(--rose-fonce); }
.puces { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- formulaires ---------- */

label.etiquette { display: block; margin-bottom: 10px; }

input[type=text], input[type=date], input[type=search], input[type=tel], textarea {
  width: 100%;
  padding: 16px;
  font-family: var(--sans);
  font-size: 16px;   /* 16 px : sinon l'iPhone zoome tout seul quand on tape dedans */
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 14px;
}
input:focus { outline: 2px solid var(--rose); outline-offset: 1px; }

.choix { display: flex; gap: 8px; }
.choix button {
  flex: 1;
  min-height: 48px;
  padding: 13px 4px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--encre-2);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.choix button[aria-pressed=true] { background: var(--rose-fonce); border-color: var(--rose-fonce); color: #fff; }

/* Puces qui passent a la ligne : criteres, frequences, envies */
.choix.souple { flex-wrap: wrap; }
.choix.souple button { flex: 0 0 auto; min-height: 42px; padding: 10px 15px; }

textarea { resize: vertical; line-height: 1.6; }

/* Le choix du parcours, en deux grandes cartes */
.carte-choix {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 18px; margin-bottom: 12px; cursor: pointer;
  background: var(--blanc); border: 1.5px solid var(--bord); border-radius: 20px;
  font-family: var(--sans); transition: border-color 0.15s ease, background 0.15s ease;
}
.carte-choix .txt { flex: 1; display: flex; flex-direction: column; }
.carte-choix .t1 { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--encre); }
.carte-choix .t2 { font-size: 11.5px; line-height: 1.55; color: var(--encre-2); margin-top: 5px; }
.carte-choix[aria-pressed=true] { border-color: var(--rose-fonce); background: var(--tint-rose); }

/* Consentement explicite (les envies) */
.consentement {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; margin-top: 22px; padding: 14px 16px;
  text-align: left; font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: var(--encre-2);
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 16px; cursor: pointer;
}
.consentement .case {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--gris);
}
.consentement[aria-pressed=true] .case { background: var(--vert); border-color: var(--vert); }

/* La grille des disponibilites : 7 jours x midi / apres-midi / soir */
.grille-dispo { display: grid; grid-template-columns: 38px repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; align-items: center; }
.grille-dispo .tete { font-size: 10px; color: var(--gris); text-align: center; }
.grille-dispo .jour { font-size: 11.5px; color: var(--encre-2); }
.grille-dispo button {
  height: 36px; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); cursor: pointer;
  transition: background 0.12s ease;
}
.grille-dispo button[aria-pressed=true] { background: var(--vert); border-color: var(--vert); }

.ajout-photo {
  display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%;
  border: 1.5px dashed var(--gris); color: var(--gris); font-size: 24px;
}

/* ---------- echelle du test ---------- */

.echelle { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 26px; }
.echelle button {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background: var(--blanc);
  color: var(--encre-2);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.echelle button[aria-pressed=true] { background: var(--rose-fonce); border-color: var(--rose-fonce); color: #fff; font-weight: 500; transform: scale(1.06); }
.echelle-legende { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; color: var(--gris); }

/* ---------- anneau de score ---------- */

.anneau { position: relative; flex: 0 0 auto; }
.anneau svg { transform: rotate(-90deg); display: block; }
.anneau .valeur {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.anneau .valeur b { font-family: var(--serif); font-weight: 600; color: var(--vert); }

/* ---------- messagerie ---------- */

.fil { flex: 1; display: flex; flex-direction: column; gap: 11px; padding: 16px 20px; }
.bulle { max-width: 78%; padding: 13px 15px; font-size: 13px; line-height: 1.55; }
.bulle.recu { align-self: flex-start; background: var(--blanc); border: 1px solid var(--bord); border-radius: 18px 18px 18px 6px; }
.bulle.envoye { align-self: flex-end; background: var(--vert); color: var(--ivoire); border-radius: 18px 18px 6px 18px; }
.heure { font-size: 9.5px; color: #A1A9A3; margin: 4px 6px 0; }
.bulle.systeme {
  align-self: center; max-width: 92%; margin: 0; text-align: center;
  font-size: 11px; line-height: 1.5; color: #8E4354; background: var(--tint-rose); border-radius: 14px;
}
.bulle.tape { display: flex; gap: 4px; align-items: center; padding: 15px 16px; }
.bulle.tape i { width: 6px; height: 6px; border-radius: 50%; background: var(--gris); animation: tape 1s ease-in-out infinite; }
.bulle.tape i:nth-child(2) { animation-delay: 0.15s; }
.bulle.tape i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tape { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.en-ligne { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5DAA7E; }
.barre-saisie button:disabled { opacity: 0.4; cursor: not-allowed; }

.barre-saisie { display: flex; gap: 10px; align-items: center; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); background: var(--blanc); border-top: 1px solid var(--bord); }
.barre-saisie input { flex: 1; border-radius: 999px; padding: 14px 18px; }

/* ---------- navigation basse ---------- */

/* Figee en bas de l'ecran, comme sur Instagram : la page defile
   derriere, la barre ne bouge jamais. Dans la messagerie et le SAV,
   la zone de saisie est figee avec elle (.pied). */
.nav {
  display: flex; justify-content: space-around; align-items: center;
  /* En bas : juste la place de la barre d'accueil de l'iPhone, pas plus */
  padding: 8px 4px max(12px, calc(env(safe-area-inset-bottom) + 2px));
  background: var(--blanc); border-top: 1px solid var(--bord); flex: 0 0 auto;
  position: sticky; bottom: 0; z-index: 20;
}
.pied { position: sticky; bottom: 0; z-index: 20; flex: 0 0 auto; }
.pied .barre-saisie { padding-bottom: 12px; }   /* la marge du bas est deja dans les onglets */
.nav button {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 56px; min-height: 48px; padding: 6px 8px;
  border: none; background: none; color: var(--gris);
  font-family: var(--sans); font-size: 9px; cursor: pointer;
}
.nav button.actif { color: var(--rose-fonce); }

/* ---------- photo floutee ---------- */

.photo { position: relative; border-radius: 50%; overflow: hidden; background: var(--sable); flex: 0 0 auto; }
.photo .flou { position: absolute; inset: 0; transition: filter 0.8s ease; }
.photo .flou > i { position: absolute; border-radius: 50%; display: block; }

/* ---------- bandeau de l'autre personne ---------- */

.bascule {
  display: flex; align-items: center; gap: 4px;
  background: rgba(78, 114, 99, 0.08); border-radius: 999px; padding: 3px;
  margin: 0 26px;
}
.bascule button {
  flex: 1; min-height: 34px; border: none; background: none; border-radius: 999px;
  font-family: var(--sans); font-size: 11px; color: var(--encre-2); cursor: pointer;
}
.bascule button.actif { background: var(--blanc); color: var(--encre); font-weight: 500; box-shadow: 0 1px 4px rgba(35, 48, 43, 0.1); }

/* ---------- panneau de demonstration ---------- */

#panneau {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(20, 28, 25, 0.55);
  display: none; align-items: flex-end;
}
#panneau.ouvert { display: flex; }
#panneau .feuille {
  width: 100%; max-height: 82%; overflow-y: auto;
  background: var(--ivoire); border-radius: 26px 26px 0 0;
  padding: 20px 22px calc(24px + env(safe-area-inset-bottom));
  animation: monte 0.28s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes monte { from { transform: translateY(100%); } to { transform: none; } }

.grille-etapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.grille-etapes button {
  padding: 11px 10px; text-align: left;
  font-family: var(--sans); font-size: 11.5px; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px; cursor: pointer;
}
.grille-etapes button:active { background: var(--tint-rose); }

.interrupteur { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--bord-2); }
.interrupteur:last-of-type { border-bottom: none; }

/* ---------- le jour J : mode Moment ---------- */

.lien { background: none; border: none; padding: 0; font: inherit; color: var(--rose-fonce); text-decoration: underline; cursor: pointer; }
.btn-fantome.demo span { font-size: 10px; opacity: 0.7; }
a.btn { box-sizing: border-box; }

/* Avant / Sur place / Pendant / Apres */
.frise { display: flex; gap: 6px; margin: 4px 0 16px; }
.frise span {
  flex: 1; padding-top: 8px; border-top: 3px solid var(--bord);
  font-size: 10px; letter-spacing: 0.06em; color: var(--gris); text-align: center;
}
.frise span.fait { border-color: var(--vert-clair); color: var(--vert); }
.frise span.actuel { border-color: var(--rose-fonce); color: var(--rose-fonce); font-weight: 500; }

.rdv-hero { background: var(--vert); border-radius: 22px; padding: 20px; color: var(--ivoire); }
.rdv-hero .btn-contour-clair { width: auto; display: inline-flex; padding: 10px 18px; min-height: 40px; }
.compte { font-family: var(--serif); font-size: 44px; font-weight: 600; color: var(--ivoire); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }

/* Le bouton d'alerte : un anneau qui se remplit pendant l'appui de 2 s */
.securite { border-color: #EBD3D6; }
.bouton-alerte {
  position: relative; flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: none; border-radius: 50%;
  background: var(--tint-rose); color: var(--rose-fonce); cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.bouton-alerte > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bouton-alerte > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bouton-alerte .fond-anneau { fill: none; stroke: #EBD3D6; stroke-width: 3; }
.bouton-alerte .anneau-appui { fill: none; stroke: var(--rose-fonce); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 182.2; stroke-dashoffset: 182.2; transition: stroke-dashoffset 0.25s ease; }
.bouton-alerte.appuye { transform: scale(0.96); }
.bouton-alerte.appuye .anneau-appui { stroke-dashoffset: 0; transition: stroke-dashoffset 2s linear; }
.alerte-envoyee { border-color: var(--rose-fonce); background: #FFF7F7; }
.alerte-envoyee .t1 { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--rose-sombre); }

/* « Tout va bien ? » : une feuille qui monte du bas */
.voile { position: absolute; inset: 0; z-index: 45; background: rgba(20, 28, 25, 0.5); display: flex; align-items: flex-end; }
.feuille-modale {
  max-height: 92%; overflow-y: auto;
  width: 100%; background: var(--ivoire); border-radius: 26px 26px 0 0;
  padding: 24px 24px calc(26px + env(safe-area-inset-bottom)); animation: monte 0.28s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

/* L'appel d'excuse, plein ecran */
.appel {
  position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #2B3A34, #151C19); font-family: var(--sans);
}
.avatar-appel {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 40px;
}
.boutons-appel { display: flex; gap: 70px; }
.boutons-appel button { width: 70px; height: 70px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.boutons-appel .refuser { background: #E5484D; }
.boutons-appel .accepter { background: #34C759; }

/* ---------- avant le test ---------- */

/* Le bouton pour commencer reste toujours visible, le texte defile dessous */
.intro .bas {
  position: sticky; bottom: 0; z-index: 5; padding-top: 30px;
  background: linear-gradient(rgba(78, 114, 99, 0), var(--vert) 26px);
}
.intro-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; margin-top: 14px; }
.intro-etapes > span {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 9.5px; line-height: 1.3; text-align: center; color: rgba(251, 246, 241, 0.8);
}
.intro-etapes i {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  color: #DFC48C; background: rgba(251, 246, 241, 0.08); border: 1px solid rgba(223, 196, 140, 0.35);
}
.promesse { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgba(251, 246, 241, 0.13); }
.promesse .rond { width: 38px; height: 38px; color: #DFC48C; background: rgba(251, 246, 241, 0.08); }
.promesse b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ivoire); }
.promesse .t { display: block; margin-top: 3px; font-size: 12px; line-height: 1.55; color: rgba(251, 246, 241, 0.75); }

/* ---------- propositions, evenements, profil ---------- */

.proposition + .proposition, .evenement + .evenement { margin-top: 12px; }

/* Bandeau cliquable (Premium+, Club, Love Room) */
.bandeau {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; text-align: left;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.5; color: var(--encre-2); cursor: pointer;
}
.bandeau > span:not(.rond) { flex: 1; }

/* Puces qui defilent a l'horizontale (filtres) */
.defile { display: flex; gap: 7px; overflow-x: auto; margin: 0 -26px; padding: 0 26px 4px; scrollbar-width: none; }
.defile::-webkit-scrollbar { display: none; }
.defile button {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; color: var(--encre-2);
  background: var(--blanc); border: 1px solid var(--bord);
}
.defile button[aria-pressed=true] { background: var(--vert); border-color: var(--vert); color: var(--ivoire); }

.groupe { background: var(--blanc); border: 1px solid var(--bord); border-radius: 20px; overflow: hidden; margin-top: 10px; }
.rangee {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 16px; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--bord-2); font-family: var(--sans); cursor: pointer;
}
.rangee:last-child { border-bottom: none; }
.rangee:active { background: var(--tint-vert); }
.rangee .txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rangee .t1 { font-size: 13px; font-weight: 500; color: var(--encre); }
.rangee .t2 { font-size: 11px; color: var(--encre-2); margin-top: 2px; }

/* Modifier ses reponses : recherche + liste triee par categorie */
.recherche { position: relative; margin-top: 8px; }
.recherche svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
.recherche input { padding-left: 42px; border-radius: 999px; }
.q-categorie {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 22px 0 8px; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--encre);
}
.q-categorie span { font-family: var(--sans); font-size: 10px; font-weight: 400; color: var(--gris); }
.q-ligne { padding: 12px 14px; background: var(--blanc); border: 1px solid var(--bord); border-radius: 16px; }
.q-ligne + .q-ligne { margin-top: 8px; }
.q-ligne.vide { border-style: dashed; border-color: #E2C3C5; }
.q-ligne p { font-size: 12.5px; line-height: 1.5; color: var(--encre); }
.q-ligne mark { background: #F6DCDF; color: inherit; border-radius: 3px; padding: 0 1px; }
.q-notes { display: flex; gap: 6px; margin-top: 10px; }
.q-notes button {
  flex: 1; height: 34px; border-radius: 10px; border: 1px solid var(--bord); background: var(--ivoire);
  font-family: var(--sans); font-size: 12.5px; color: var(--encre-2); cursor: pointer;
}
.q-notes button[aria-pressed=true] { background: var(--rose-fonce); border-color: var(--rose-fonce); color: #fff; font-weight: 500; }

/* ---------- divers ---------- */

.separateur { height: 1px; background: var(--bord-2); margin: 16px 0; }
.trait-or { width: 40px; height: 1px; background: var(--or); }
.espace { flex: 1 1 auto; }
.pastille { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--rose-fonce); }

.charge { width: 46px; height: 46px; border: 2px solid var(--bord); border-top-color: var(--rose-fonce); border-radius: 50%; animation: tourne 0.8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

.apparait { animation: apparait 0.5s ease both; }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Onglet discret d'acces au panneau de demonstration, sur tous les ecrans */
#onglet-demo {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 24px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 14px 0 0 14px;
  background: rgba(35, 48, 43, 0.38);
  color: var(--ivoire);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
#onglet-demo:active { background: rgba(35, 48, 43, 0.75); }

/* ---------- consentements et documents ---------- */

.consentement.verrou { cursor: default; opacity: 0.75; }
.consentement[aria-checked=true] .case { background: var(--vert); border-color: var(--vert); }
.consentement .mention { display: block; margin-top: 4px; font-size: 10px; letter-spacing: 0.04em; color: var(--rose-fonce); }
.consentement + .consentement { margin-top: 10px; }
.carte-choix:disabled { opacity: 0.45; cursor: not-allowed; }
.ecran-doc { overflow: hidden; }
iframe.doc { flex: 1; width: 100%; border: none; background: var(--ivoire); }
.invitation {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px;
  background: rgba(251, 246, 241, 0.12); color: var(--ivoire); font-size: 11.5px; line-height: 1.5; text-align: left;
}

/* ---------- criteres redhibitoires ---------- */

.redhib {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0; border: none; background: none;
  font-family: var(--sans); font-size: 11.5px; color: var(--encre-2); cursor: pointer; text-align: left;
}
.interrupteur-mini {
  position: relative; flex: 0 0 auto; width: 34px; height: 20px; border-radius: 10px; background: var(--bord); transition: background 0.15s ease;
}
.interrupteur-mini i {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(35, 48, 43, 0.25); transition: transform 0.15s ease;
}
.redhib[aria-checked=true] { color: var(--rose-sombre); }
.redhib[aria-checked=true] .interrupteur-mini { background: var(--rose-fonce); }
.redhib[aria-checked=true] .interrupteur-mini i { transform: translateX(14px); }

/* ---------- l'analyse de la Note d'Alchimie ---------- */

.analyse .synthese { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--encre); }
.analyse .vigilance { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--tint-rose); }
.analyse .vigilance p { font-size: 12px; line-height: 1.6; color: #5E4045; }
.dim-ligne { padding: 12px 0; border-bottom: 1px solid var(--bord-2); }
.dim-ligne:last-child { border-bottom: none; }
.dim-tete { display: flex; align-items: center; gap: 10px; }
.dim-tete .t1 { flex: 0 0 auto; width: 118px; font-size: 12.5px; font-weight: 500; color: var(--encre); }
.dim-tete b { width: 26px; text-align: right; font-size: 11.5px; font-weight: 500; color: var(--encre-2); }
.dim-ligne p { margin-top: 6px; font-size: 12px; line-height: 1.6; }
.barre { flex: 1; height: 6px; border-radius: 3px; background: var(--bord-2); overflow: hidden; }
.barre > i { display: block; height: 6px; border-radius: 3px; background: var(--vert); }
.conseil { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; color: #3E4F47; }
.part { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; color: var(--encre); }
.part > span:first-child { flex: 0 0 auto; width: 118px; }
.part em { font-style: normal; font-size: 10px; color: var(--gris); }
.part b { width: 40px; text-align: right; font-weight: 500; }

/* ---------- annulation ---------- */

.bandeau-annule { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; margin-bottom: 14px; }
.bandeau-annule p { flex: 1; font-size: 11.5px; line-height: 1.55; color: #3B5B4D; }

/* ---------- entre amis ---------- */

.initiale {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%;
  color: #fff; font-family: var(--serif); font-weight: 600; border: 2px solid var(--ivoire);
}
.pile { display: inline-flex; align-items: center; flex: 0 0 auto; }
.pile .initiale + .initiale { margin-left: -12px; }
.groupe-amis.principal { border-color: #CFDCD2; background: linear-gradient(180deg, #FFFFFF, #F6F9F5); }
.groupe-amis + .groupe-amis { margin-top: 10px; }
.communs { margin: 10px 0 0; padding: 0; list-style: none; }
.communs li { position: relative; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--encre-2); }
.communs li + li { margin-top: 4px; }
.communs li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--vert-clair); }
.membre { padding: 10px 0; border-bottom: 1px solid var(--bord-2); }
.membre:last-child { border-bottom: none; }
.auteur { font-size: 10px; color: var(--gris); margin: 0 6px 3px; }
.coche {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--gris);
}
.coche.on { background: var(--vert); border-color: var(--vert); }

/* ---------- bien rentre(e) : le rappel flottant ---------- */

.rappel-rentre {
  position: sticky; top: 6px; margin: 6px 16px 10px; z-index: 30; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 18px;
  background: var(--vert); color: var(--ivoire); font-size: 11.5px; line-height: 1.4;
  box-shadow: 0 10px 28px rgba(35, 48, 43, 0.28);
}
.rappel-rentre span { flex: 1; }
.rappel-rentre button {
  flex: 0 0 auto; min-height: 38px; padding: 8px 14px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--ivoire); color: var(--vert-txt); font-family: var(--sans); font-size: 12px; font-weight: 500;
}

/* ---------- parrainage et carte ---------- */

.lien-parrain input { margin-top: 8px; font-size: 12.5px; padding: 12px 14px; color: var(--encre-2); }
.palier { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.palier .rond { width: 36px; height: 36px; background: var(--bord-2); color: var(--gris); font-size: 13px; font-weight: 500; }
.palier.ok .rond { background: var(--vert); color: var(--ivoire); }
.palier .txt { display: flex; flex-direction: column; }
.palier .t1 { font-size: 13px; font-weight: 500; color: var(--encre); }
.palier .t2 { font-size: 11px; color: var(--encre-2); margin-top: 2px; }
.carte-membre {
  margin-top: 8px; padding: 20px; border-radius: 24px; color: var(--ivoire);
  background: linear-gradient(150deg, #4E7263, #3B5B4D 70%); box-shadow: 0 16px 34px rgba(35, 48, 43, 0.22);
}
.carte-membre .nom { margin-top: 14px; font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ivoire); }
.carte-membre .code { margin-top: 2px; font-size: 12px; letter-spacing: 0.22em; color: #DFC48C; }
.qr-cadre { margin: 16px auto 0; width: 210px; max-width: 100%; padding: 12px; border-radius: 18px; background: #fff; }
.qr-cadre svg { display: block; width: 100%; height: auto; }

/* ---------- l'ecran des questions ----------
   La question au centre, avec un halo qui respire ; les reponses en bas,
   sous le pouce, figees comme la barre d'onglets. */

.question .entete { gap: 10px; }
.encourage {
  flex: 1; text-align: center; font-size: 10.5px; letter-spacing: 0.06em; color: var(--accent);
  animation: apparait 0.5s ease both;
}
.question .scene {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 28px 18px; text-align: center; animation: scene-entre 0.38s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.question .scene.sort { animation: scene-sort 0.22s ease both; }
@keyframes scene-entre { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes scene-sort { to { opacity: 0; transform: translateX(-28px); } }

.halo { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.halo .onde {
  position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0.25;
  animation: onde 3.2s ease-out infinite;
}
.halo .onde.o2 { animation-delay: 1.6s; }
@keyframes onde { from { transform: scale(0.62); opacity: 0.45; } to { transform: scale(1.12); opacity: 0; } }
.coeur-halo {
  position: relative; width: 82px; height: 82px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--fond-cat); color: var(--orn); box-shadow: 0 12px 30px rgba(35, 48, 43, 0.16);
  animation: respire 4s ease-in-out infinite;
}
@keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.eclat { position: absolute; border-radius: 50%; background: var(--accent); opacity: 0.35; animation: flotte 5s ease-in-out infinite; }
.eclat.e1 { width: 9px; height: 9px; top: 10px; right: 14px; }
.eclat.e2 { width: 6px; height: 6px; bottom: 16px; left: 8px; animation-delay: 1.2s; }
.eclat.e3 { width: 5px; height: 5px; top: 30px; left: 2px; animation-delay: 2.4s; opacity: 0.25; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.question .cat { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--accent); }
.points-cat { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.points-cat i { width: 6px; height: 6px; border-radius: 3px; background: rgba(128, 128, 128, 0.25); transition: width 0.3s ease; }
.points-cat i.fait { background: var(--accent); opacity: 0.55; }
.points-cat i.actuel { width: 18px; background: var(--accent); }
.question .q { margin-top: 14px; font-size: 24px; line-height: 1.38; max-width: 330px; }
.question .pourquoi { margin-top: 12px; max-width: 300px; font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.6; color: var(--encre-2); }

.question .reponses {
  position: sticky; bottom: 0; z-index: 5; flex: 0 0 auto;
  padding: 16px 22px calc(14px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 28px 28px 0 0; box-shadow: 0 -8px 26px rgba(35, 48, 43, 0.07);
}
.question .echelle { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin: 0; padding: 0 2px; }
.bulle-rep {
  flex: 0 0 auto; border-radius: 50%; background: #fff; cursor: pointer; padding: 0;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.bulle-rep.b1, .bulle-rep.b5 { width: 58px; height: 58px; }
.bulle-rep.b2, .bulle-rep.b4 { width: 46px; height: 46px; }
.bulle-rep.b3 { width: 34px; height: 34px; }
.bulle-rep.b1, .bulle-rep.b2 { border: 2px solid var(--rose); }
.bulle-rep.b3 { border: 2px solid #B9BFBA; }
.bulle-rep.b4, .bulle-rep.b5 { border: 2px solid var(--vert-clair); }
.bulle-rep:active { transform: scale(0.92); }
.bulle-rep[aria-pressed=true] { transform: scale(1.1); animation: pop 0.28s ease; }
.bulle-rep.b1[aria-pressed=true], .bulle-rep.b2[aria-pressed=true] { background: var(--rose); box-shadow: 0 6px 16px rgba(201, 124, 137, 0.45); }
.bulle-rep.b3[aria-pressed=true] { background: #B9BFBA; }
.bulle-rep.b4[aria-pressed=true], .bulle-rep.b5[aria-pressed=true] { background: var(--vert-clair); box-shadow: 0 6px 16px rgba(78, 114, 99, 0.4); }
@keyframes pop { 0% { transform: scale(1); } 55% { transform: scale(1.22); } 100% { transform: scale(1.1); } }
.question .echelle-legende { margin-top: 8px; font-size: 10.5px; font-weight: 500; }
.question .echelle-legende span:first-child { color: var(--rose-fonce); }
.question .echelle-legende span:last-child { color: var(--vert); }
.libelle-choix { margin-top: 6px; min-height: 20px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--encre); }
.pied-q { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bord-2); }
.pied-q span { font-size: 10.5px; color: var(--gris); }
.lien-q { border: none; background: none; padding: 6px 0; font-family: var(--sans); font-size: 12px; color: var(--encre-2); cursor: pointer; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .question .scene, .halo .onde, .coeur-halo, .eclat, .bulle-rep[aria-pressed=true] { animation: none; }
}