/* YARA SANTOS — Charte graphique */
/* ══════════════════════════════════════
   YARA SANTOS — v5
   Palette renforcée : #0D2E42 / #F6F0E6 / #B8922A / #2E7A8A
══════════════════════════════════════ */

:root {
  --bahia      : #0D2E42;
  --bahia-mid  : #123B50;
  --mer        : #16506A;   /* bleu mer : bulles de Yara */
  --mer-deep   : #134459;
  --lagon      : #2E7A8A;
  --lagon-light: #4F9DAD;
  --or         : #B8922A;
  --or-light   : #D4AD55;
  --or-pale    : rgba(184,146,42,.12);
  --ivoire     : #F6F0E6;
  --ivoire-dark: #EDE5D6;
  --brun       : #1E1510;
  --blanc      : #FFFFFF;
  --texte      : #1E1510;
  --texte-mid  : #3A2E24;
  --texte-soft : #7A6A58;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family    : 'Jost', sans-serif;
  font-weight    : 300;
  background     : var(--ivoire);
  color          : var(--texte);
  overflow-x     : hidden;
  padding-top    : env(safe-area-inset-top, 0px);
  padding-bottom : env(safe-area-inset-bottom, 0px);
}

/* ── PARTICULES EAU ── */
#pts { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.pt  { position:absolute; top:-50px; animation:ptfall linear infinite; will-change:transform; }
@keyframes ptfall {
  0%   { opacity:0;   transform:translateY(0)     translateX(0)               rotate(0deg); }
  5%   { opacity:1; }
  50%  { opacity:.75; transform:translateY(50vh)  translateX(var(--dx,0px))   rotate(180deg); }
  95%  { opacity:.5; }
  100% { opacity:0;   transform:translateY(105vh) translateX(calc(var(--dx,0px)*1.8)) rotate(360deg); }
}

/* ── ÉCRAN HERO ── */
#screen-hero { position:fixed; inset:0; z-index:50; background:var(--bahia); }
.hero-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 20%; display:block;
}
.hero-overlay {
  position:absolute; inset:0;
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(13,46,66,.92) 0%, rgba(13,46,66,.55) 55%, rgba(13,46,66,0) 100%),
    linear-gradient(to bottom, rgba(13,46,66,0) 0%, rgba(13,46,66,.05) 30%, rgba(13,46,66,.6) 58%, rgba(13,46,66,.97) 100%);
}
.hero-content {
  position:absolute; bottom:0; left:0; right:0;
  padding:0 26px 40px; text-align:center;
  max-width:480px; margin:0 auto;
  text-shadow:0 1px 14px rgba(13,46,66,.7);
}
.hero-eyebrow {
  font-family:'Jost',sans-serif; font-size:10px;
  letter-spacing:.36em; color:var(--or-light);
  text-transform:uppercase; font-weight:400;
  margin-bottom:12px; display:block;
  animation:fadeUp .8s .3s ease both;
}
.hero-name {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(48px,13vw,72px); font-weight:300;
  color:var(--blanc); line-height:1.0; letter-spacing:.03em;
  margin-bottom:18px; animation:fadeUp .9s .5s ease both;
}
.hero-name em { font-style:italic; color:var(--or-light); }

/* Bloc « le don » */
.hero-don {
  margin:0 auto 26px; max-width:340px;
  padding:16px 18px 15px;
  background:rgba(13,46,66,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(46,122,138,.45);
  border-radius:4px 20px 4px 20px;
  animation:fadeUp 1s .7s ease both;
}
.don-badge {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:400;
  color:var(--ivoire); margin-bottom:8px;
}
.don-badge em { font-style:italic; color:var(--or-light); }
.don-ico { width:18px; height:18px; color:var(--or-light); flex-shrink:0; }
.don-txt {
  font-family:'Jost',sans-serif; font-size:13.5px; font-weight:300;
  line-height:1.65; color:rgba(246,240,230,.92); text-shadow:none;
}
.don-txt strong { font-weight:500; color:var(--or-light); }
.hero-micro {
  font-family:'Jost',sans-serif; font-size:10.5px; letter-spacing:.12em;
  color:rgba(246,240,230,.7); margin-top:14px;
  animation:fadeUp 1.1s 1s ease both;
}
.hero-tagline { display:none; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Bouton hero shimmer */
.btn-shimmer {
  display:inline-block; position:relative; overflow:hidden;
  border:1px solid var(--or); border-radius:50px;
  padding:16px 42px; background:rgba(13,46,66,.35);
  font-family:'Jost',sans-serif; font-size:11px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--or-light); cursor:pointer;
  transition:background .3s, color .3s;
  animation:fadeUp 1.1s .9s ease both;
  box-shadow:0 0 28px rgba(184,146,42,.15);
}
.btn-shimmer::after {
  content:''; position:absolute;
  top:-50%; left:-75%; width:55%; height:200%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  animation:shimmer 2.5s 1.2s ease-in-out infinite;
}
@keyframes shimmer { 0%{left:-75%} 55%{left:130%} 100%{left:130%} }
.btn-shimmer:active { background:var(--or); color:var(--bahia); }

/* Transition out */
#screen-hero.out { animation:heroOut .85s ease forwards; }
@keyframes heroOut {
  0%   { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.05); pointer-events:none; }
}

/* ── HEADER ── */

/* ── PAGE ── */
#screen-chat { display:none; flex-direction:column; min-height:100vh; }
.page { flex:1 0 auto; width:100%; max-width:480px; margin:0 auto; padding:0 14px 40px; }

/* ── CARTE INTRO ── */
.intro-card {
  /* Signature Yara : carte sombre « eaux profondes », texte aligné à gauche */
  background:linear-gradient(165deg,var(--bahia) 0%,var(--bahia-mid) 100%);
  border-radius:4px 28px 4px 28px;
  padding:30px 24px 28px;
  margin-top:18px;
  box-shadow:0 14px 40px rgba(13,46,66,.28);
  border:1px solid rgba(46,122,138,.35);
  max-width:448px; margin-left:auto; margin-right:auto;
  position:relative; overflow:hidden;
}
.intro-avatar-wrap { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.intro-avatar {
  width:72px; height:72px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:2px solid var(--lagon);
  box-shadow:0 0 0 5px rgba(46,122,138,.18), 0 0 0 10px rgba(184,146,42,.10);
  flex-shrink:0;
}
.intro-name {
  font-family:'Cormorant Garamond',serif;
  font-size:28px; font-weight:300; font-style:italic;
  color:var(--ivoire); letter-spacing:.02em;
  text-align:left; margin-bottom:4px; line-height:1.1;
}
.intro-sub {
  font-family:'Jost',sans-serif; font-size:9.5px;
  color:#8FC3CD; text-align:left; text-transform:uppercase;
  letter-spacing:.18em; margin-bottom:0; font-weight:400; line-height:1.7;
}
.intro-divider {
  width:64px; height:10px; margin:0 0 18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 10'%3E%3Cpath d='M1 5 Q9 0 17 5 T33 5 T49 5 T63 5' fill='none' stroke='%23D4AD55' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center;
  opacity:.85;
}
.intro-body {
  font-family:'Cormorant Garamond',serif;
  font-size:18px; line-height:1.75;
  color:rgba(246,240,230,.9); font-weight:300; min-height:28px;
}
.cursor {
  display:inline-block; width:1.5px; height:1.1em;
  background:var(--or); margin-left:2px;
  vertical-align:text-bottom;
  animation:blink .75s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── CHAT FLOW ── */
#chat-flow { margin-top:14px; }

/* Bulle Yara — plus grande, plus aérée */
.brow {
  display:flex; align-items:flex-end; gap:10px;
  margin-bottom:18px; animation:bup .45s ease both;
}
@keyframes bup {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.av-round {
  width:40px; height:40px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  border:1.5px solid var(--lagon);
  box-shadow:0 0 0 3px rgba(46,122,138,.14);
}
.av-round img { width:100%; height:100%; object-fit:cover; object-position:center top; }

.bbl {
  /* Bleu mer : même famille que la carte de présentation, un ton plus lumineux */
  background:linear-gradient(165deg,var(--mer-deep) 0%,var(--mer) 100%);
  border-radius:20px 20px 20px 4px;
  padding:16px 18px 13px 20px;
  font-family:'Cormorant Garamond',serif;
  font-size:17.5px; line-height:1.7;
  color:rgba(246,240,230,.92); font-weight:400;
  box-shadow:0 8px 26px rgba(13,46,66,.22);
  border:1px solid rgba(46,122,138,.35);
  flex:1; position:relative;
}
.bbl::before { content:none; }
.bbl em    { font-style:italic; color:#8FC3CD; font-weight:400; }
.bbl em.kw-or, .bbl .kw-or { color:var(--or-light); font-weight:500; }
.bbl strong {
  font-weight:500; color:var(--or-light);
  font-family:'Jost',sans-serif; font-size:12.5px;
  letter-spacing:.03em;
}
.bbl-time {
  font-family:'Jost',sans-serif; font-size:10.5px;
  color:rgba(246,240,230,.4); text-align:right;
  margin-top:10px;
}

/* Typing */
.ty-row { display:flex; align-items:flex-end; gap:10px; margin-bottom:18px; }
.ty-bbl {
  background:linear-gradient(165deg,var(--mer-deep) 0%,var(--mer) 100%);
  border-radius:20px 20px 20px 4px;
  padding:16px 20px;
  box-shadow:0 8px 26px rgba(13,46,66,.22);
  border:1px solid rgba(46,122,138,.35);
  display:flex; gap:6px; align-items:center;
}
.td {
  width:7px; height:7px; border-radius:50%;
  background:var(--lagon-light);
  animation:tdw 1.5s ease-in-out infinite;
}
.td:nth-child(2) { animation-delay:.22s; }
.td:nth-child(3) { animation-delay:.44s; }
@keyframes tdw {
  0%,60%,100% { transform:translateY(0); opacity:.3; }
  30%         { transform:translateY(-5px); opacity:.9; }
}

/* Bulle utilisateur */
.urow { display:flex; justify-content:flex-end; margin-bottom:18px; animation:bup .35s ease both; }
.ubbl {
  /* Réponse de la personne : ivoire, pour contraster avec les bulles sombres de Yara */
  background:var(--blanc);
  color:var(--bahia);
  border-radius:20px 20px 4px 20px;
  padding:13px 18px;
  font-family:'Jost',sans-serif; font-size:14.5px; font-weight:400;
  line-height:1.5; max-width:76%;
  border:1px solid rgba(46,122,138,.3);
  box-shadow:0 4px 16px rgba(13,46,66,.08);
}
.ubbl-time { font-size:10.5px; color:var(--texte-soft); opacity:.7; margin-top:6px; text-align:right; }

/* Encart Iemanjá — carte dorée claire, comme les mises en avant d'Anantara */
.encart {
  position:relative;
  background:linear-gradient(135deg,#F8F1E2 0%,#F0DFB8 100%);
  border-left:3px solid var(--or);
  padding:18px 18px 16px 26px; margin-top:14px;
  border-radius:4px 16px 16px 4px;
  font-style:italic; font-size:16px; line-height:1.65;
  color:var(--texte-mid);
  box-shadow:0 8px 22px rgba(184,146,42,.2);
}
.encart::before{
  content:'\201C'; position:absolute; top:-4px; left:8px;
  font-family:'Cormorant Garamond',serif; font-size:44px; line-height:1;
  color:var(--or); opacity:.35;
}
.encart-tag {
  font-family:'Jost',sans-serif; font-style:normal;
  font-size:12.5px; color:var(--or); letter-spacing:.02em;
  margin-top:12px; display:block;
  font-weight:600;
}

/* Signe — carte dorée claire : moment fort de la lecture, elle doit ressortir */
.signe-card {
  background:linear-gradient(135deg,#F8F1E2 0%,#F0DFB8 100%);
  border-left:3px solid var(--or);
  border-radius:4px 18px 18px 4px; padding:20px 20px 18px 22px; margin-top:14px;
  box-shadow:0 8px 24px rgba(184,146,42,.2);
}
.signe-sym { font-size:34px; color:var(--bahia); display:block; margin-bottom:8px; }
.signe-nom {
  font-family:'Jost',sans-serif; font-size:10px;
  letter-spacing:.22em; color:var(--texte-soft);
  text-transform:uppercase; margin-bottom:10px; font-weight:500;
}
.signe-txt {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:16px; line-height:1.7; color:var(--texte-mid);
}

/* Scan */
.scan-wrap {
  background:rgba(255,255,255,.04);
  border-radius:4px 16px 4px 16px; padding:24px; margin-top:14px; text-align:center;
  border:1px solid rgba(143,195,205,.3);
}
.sil { position:relative; width:76px; height:114px; margin:0 auto 14px; }
.sil svg { width:100%; height:100%; opacity:.18; }
.wsc {
  position:absolute; left:-8%; right:-8%; height:2px;
  background:linear-gradient(90deg,transparent,var(--lagon-light),var(--or-light),var(--lagon-light),transparent);
  animation:wscan 2.8s ease-in-out infinite;
  box-shadow:0 0 10px rgba(46,122,138,.5);
}
@keyframes wscan { 0%{top:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:100%;opacity:0} }
.scan-lbl {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:15px; color:rgba(255,255,255,.55);
  animation:breath 2.4s ease-in-out infinite;
}
@keyframes breath { 0%,100%{opacity:.55}50%{opacity:1} }

/* Bullets */
.sbullet {
  background:linear-gradient(165deg,var(--bahia) 0%,var(--bahia-mid) 100%);
  border-left:2px solid var(--or-light);
  padding:13px 16px; margin:10px 0 0 50px;
  font-family:'Jost',sans-serif; font-size:13.5px; line-height:1.7;
  color:rgba(246,240,230,.85); animation:bup .45s ease both;
  border-radius:4px 14px 14px 4px;
  box-shadow:0 4px 16px rgba(13,46,66,.15);
}
.sbullet strong { color:var(--or-light); font-weight:500; }

/* Thématiques */
.tgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; animation:bup .4s ease both; }
.tcard {
  background:var(--blanc); border-radius:14px; padding:16px 14px;
  cursor:pointer; border:1px solid rgba(13,46,66,.07);
  transition:all .25s; box-shadow:0 2px 12px rgba(13,46,66,.06);
}
.tcard:active { transform:scale(.972); }
.tcard.sel { border-color:var(--lagon); background:rgba(46,122,138,.05); box-shadow:0 3px 16px rgba(46,122,138,.15); }
.tcard-icon { width:28px; height:28px; margin-bottom:10px; opacity:.65; }
.tcard-icon svg { width:100%; height:100%; }
.tcard-name { font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--bahia); margin-bottom:4px; line-height:1.3; font-weight:400; }
.tcard-sub { font-size:10px; color:var(--texte-soft); line-height:1.45; font-weight:300; }

/* Genre */
.grow { display:flex; gap:8px; margin-top:12px; animation:bup .4s ease both; }
.gcard {
  flex:1; background:var(--blanc); border-radius:14px; padding:16px 8px;
  text-align:center; cursor:pointer; border:1px solid rgba(13,46,66,.07);
  transition:all .25s; box-shadow:0 2px 12px rgba(13,46,66,.06);
}
.gcard.sel { border-color:var(--lagon); background:rgba(46,122,138,.05); }
.gcard-icon { width:24px; height:24px; margin:0 auto 8px; opacity:.55; }
.gcard-icon svg { width:100%; height:100%; }
.gcard-label { font-family:'Cormorant Garamond',serif; font-size:17px; color:var(--bahia); font-weight:400; }

/* End card */
.end-card {
  background:linear-gradient(135deg,var(--bahia),#1A4A62);
  border-radius:18px; padding:30px 24px; text-align:center;
  border:1px solid rgba(184,146,42,.18); animation:bup .5s ease both; margin-top:12px;
  box-shadow:0 6px 30px rgba(13,46,66,.25);
}
.end-logo { height:56px; width:auto; margin:0 auto 16px; filter:brightness(0) invert(1); opacity:.85; }
.end-lbl { font-size:9px; color:var(--or-light); letter-spacing:.24em; text-transform:uppercase; margin-bottom:12px; font-family:'Jost',sans-serif; }
.end-quote { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:rgba(255,255,255,.78); line-height:1.65; margin-bottom:22px; }
.pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pill { background:rgba(255,255,255,.1); color:rgba(255,255,255,.65); border-radius:20px; padding:7px 16px; font-size:11px; border:1px solid rgba(255,255,255,.15); font-weight:300; font-family:'Jost',sans-serif; }

/* ── INPUT AREA ── */
.inp-area {
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(246,240,230,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(13,46,66,.1);
  padding:14px 16px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  z-index:200;
  box-shadow:0 -4px 24px rgba(13,46,66,.08);
}
.inp-inner { max-width:480px; margin:0 auto; }
.iap { display:none; }
.iap.vis { display:block; }

.inp-row { display:flex; gap:10px; align-items:center; }
.inp-field {
  flex:1; border:1.5px solid rgba(13,46,66,.14);
  border-radius:50px; padding:15px 24px; font-size:16px;
  font-family:'Cormorant Garamond',serif; font-weight:300;
  color:var(--texte); background:var(--blanc); outline:none;
  transition:border-color .25s, box-shadow .25s;
  -webkit-appearance:none;
  box-shadow:0 2px 16px rgba(13,46,66,.07);
}
.inp-field:focus { border-color:var(--lagon); box-shadow:0 2px 16px rgba(46,122,138,.15); }
.inp-field::placeholder { color:var(--texte-soft); font-size:15px; font-style:italic; }

/* Bouton Envoyer */
.snd-btn {
  position:relative; overflow:hidden;
  background:var(--or); border:none; border-radius:50px;
  padding:15px 28px; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
  color:var(--blanc); letter-spacing:.1em;
  white-space:nowrap;
  box-shadow:0 4px 22px rgba(184,146,42,.45);
  transition:opacity .2s, transform .15s;
}
.snd-btn::after {
  content:''; position:absolute;
  top:-50%; left:-75%; width:55%; height:200%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  animation:shimmer 2.4s .5s ease-in-out infinite;
}
.snd-btn:active { opacity:.88; transform:scale(.97); }

/* Bouton Confirmer */
.btn-confirm {
  position:relative; overflow:hidden;
  width:100%; background:var(--or); color:var(--blanc);
  border:none; border-radius:50px; padding:16px 20px;
  font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
  letter-spacing:.1em; cursor:pointer; margin-top:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 22px rgba(184,146,42,.45);
  transition:opacity .2s, transform .15s;
}
.btn-confirm::after {
  content:''; position:absolute;
  top:-50%; left:-75%; width:55%; height:200%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  animation:shimmer 2.4s .5s ease-in-out infinite;
}
.btn-confirm:active { opacity:.88; transform:scale(.98); }

.confid {
  text-align:center; font-family:'Jost',sans-serif; font-size:10px;
  color:var(--texte-soft); margin-top:8px; letter-spacing:.05em; opacity:.7;
}

/* DDN */
.dob-row { display:flex; gap:8px; }
.dob-in {
  flex:1; border:1.5px solid rgba(13,46,66,.14); border-radius:12px;
  padding:14px 8px; font-size:17px; text-align:center;
  font-family:'Cormorant Garamond',serif; color:var(--texte);
  background:var(--blanc); outline:none; -webkit-appearance:none;
  box-shadow:0 2px 10px rgba(13,46,66,.05);
}
.dob-in:focus { border-color:var(--lagon); }

@media (prefers-reduced-motion:reduce) {
  .pt,.td,.wsc,.scan-lbl,.btn-shimmer::after,.snd-btn::after,.btn-confirm::after { animation:none; }
}

/* Mots-clés colorés dans la présentation */
.kw { font-style:italic; }
.kw-or  { color:var(--or-light); font-weight:500; }
.kw-eau { color:#8FC3CD; }


/* Zone de saisie masquée au départ (affichée par le JS) */
#inp-area{display:none}
/* Pas de footer sur l'écran de chat (voir index.php) : la barre de saisie fixe occupe
   déjà le bas de l'écran en continu, donc .page peut aller jusqu'au bord sans réserve. */
#screen-chat{padding-bottom:0}
#da{flex:1.6}
.confid-ico{width:11px;height:11px;vertical-align:-1px;margin-right:2px}

/* Liens légaux sous le champ email (seuls liens sortants de la LP, ouverts dans un nouvel onglet) */
.confid-legal{margin-top:4px;text-align:center;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.05em;color:var(--texte-soft);opacity:.6}
.confid-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}