/* =====================================================================
   RAYOR — base commune des pages outils (refonte 2026)
   Scopé sous .rayor-tool. Tokens hérités de /newstyles.css.
   ===================================================================== */
.rayor-tool{
  --mono: ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,monospace;
  width:min(820px,92vw); margin:0 auto; padding:2.2rem 0 4rem; color:var(--text);
}
.rayor-tool.rt-wide{ width:min(1100px,94vw); }

/* ---- En-tête ---- */
.rt-head{ text-align:center; margin-bottom:1.8rem; }
.rt-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
  padding:.4rem .8rem; border:1px solid var(--border); border-radius:999px;
  background:color-mix(in srgb,var(--surface) 70%,transparent);
}
.rt-eyebrow::before{ content:""; width:16px; height:8px; border-radius:999px; background:var(--grad-tricolore); }
.rt-head h1{ font-size:clamp(1.8rem,1.1rem+2.2vw,2.6rem); font-weight:800; letter-spacing:-.03em; margin:1rem 0 .4rem; }
.rt-head p{ color:var(--text-soft); max-width:58ch; margin:0 auto; line-height:1.55; }
.rt-head p a{ color:var(--r-blue); font-weight:700; text-decoration:none; }

/* ---- Cartes ---- */
.rt-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:1.6rem; margin-bottom:1.2rem; }
.rt-card > h2, .rt-card > h3{ font-weight:800; letter-spacing:-.02em; margin:0 0 .9rem; }
.rt-muted{ color:var(--muted); font-size:.92rem; }
.rt-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:760px){ .rt-grid2{ grid-template-columns:1fr; } }

/* ---- Champs ---- */
.rayor-tool label{ display:block; font-weight:600; font-size:.88rem; color:var(--text-soft); margin:0 0 .4rem; }
.rayor-tool input[type=text], .rayor-tool input[type=number], .rayor-tool input[type=email],
.rayor-tool input[type=password], .rayor-tool input[type=search], .rayor-tool input[type=url],
.rayor-tool input:not([type]), .rayor-tool textarea, .rayor-tool select{
  width:100%; font-family:inherit; font-size:1rem; padding:.8rem 1rem; border-radius:12px;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  transition:border-color .2s, box-shadow .2s; margin-bottom:1rem;
}
.rayor-tool textarea{ min-height:130px; resize:vertical; line-height:1.5; }
.rayor-tool input:focus, .rayor-tool textarea:focus, .rayor-tool select:focus{
  outline:none; border-color:var(--r-blue); box-shadow:0 0 0 4px var(--ring);
}
.rayor-tool input[type=file]{ width:100%; padding:.7rem; border:1px dashed var(--border-strong); background:var(--surface-2); border-radius:12px; cursor:pointer; color:var(--text-soft); margin-bottom:1rem; }
.rayor-tool input[type=range]{ accent-color:var(--r-blue); width:100%; margin:.3rem 0 1rem; padding:0; }
.rt-inline-label{ display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--text); margin-bottom:1rem; }
.rt-inline-label input{ width:auto !important; margin:0 !important; }

/* ---- Boutons ---- */
.rayor-tool button, .rt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:700; cursor:pointer; color:#fff; text-decoration:none;
  background:var(--grad-brand); border:1px solid transparent; padding:.78rem 1.4rem; border-radius:12px;
  box-shadow:0 12px 26px -14px rgba(59,109,255,.9); transition:transform .18s ease, filter .18s ease, border-color .18s ease;
}
.rayor-tool button:hover, .rt-btn:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.rayor-tool button:disabled{ opacity:.6; cursor:not-allowed; transform:none; filter:none; }
.rt-btn-ghost{ background:transparent !important; color:var(--text) !important; border-color:var(--border-strong) !important; box-shadow:none !important; }
.rt-btn-ghost:hover{ border-color:var(--r-blue) !important; }
.rt-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* ---- Boîte de résultat / code ---- */
.rt-result, .rayor-tool pre{
  font-family:var(--mono); font-size:.9rem; line-height:1.55; white-space:pre-wrap; word-break:break-word;
  background:#0b1020; color:#d6e2ff; border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:1rem 1.1rem; margin:0; overflow:auto; min-height:48px;
}
.rt-result:empty::before{ content:"Le résultat s'affichera ici…"; color:#6b7aa3; }

/* ---- Dropzone (upload drag & drop, clic = explorateur) ---- */
.rt-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  text-align:center; padding:1.7rem 1.2rem; margin-bottom:1rem;
  border:2px dashed var(--border-strong); border-radius:16px; background:var(--surface-2);
  cursor:pointer; color:var(--text-soft); font-weight:500;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.rt-drop:hover, .rt-drop:focus-visible{ border-color:var(--r-blue); }
.rt-drop.drag{
  border-color:var(--r-blue);
  background:color-mix(in srgb, var(--r-blue) 10%, transparent);
  transform:scale(1.01);
}
.rt-drop .ico{ font-size:1.9rem; line-height:1; margin-bottom:.2rem; }
.rt-drop strong{ color:var(--text); font-weight:700; }
.rt-drop .hint{ font-size:.85rem; color:var(--muted); }
.rt-drop .file{ font-size:.86rem; font-weight:700; color:var(--r-blue); word-break:break-all; }
.rt-drop .file:empty{ display:none; }
.rt-drop input[type=file]{ display:none; }

/* ---- Toast ---- */
.rt-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--grad-brand); color:#fff; padding:.7rem 1.2rem; border-radius:999px;
  font-weight:700; font-size:.9rem; box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:9000;
}
.rt-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Barre de progression (force) ---- */
.rt-progress{ height:10px; border-radius:99px; background:color-mix(in srgb,var(--text) 12%,transparent); overflow:hidden; }
.rt-progress > i{ display:block; height:100%; width:0; border-radius:99px; background:var(--grad-brand); transition:width .35s ease, background .35s ease; }

/* ---- Tableau (ex. lettres grecques) ---- */
.rt-table-wrap{ overflow:auto; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.rt-table{ width:100%; border-collapse:collapse; font-size:.95rem; background:var(--surface); }
.rt-table th{ background:var(--surface-2); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:.7rem .8rem; text-align:center; border-bottom:1px solid var(--border); }
.rt-table td{ padding:.6rem .8rem; text-align:center; border-bottom:1px solid var(--border); color:var(--text-soft); }
.rt-table tr:last-child td{ border-bottom:none; }
.rt-glyph{ font-family:'Times New Roman',serif; font-size:1.5rem; cursor:pointer; color:var(--text); display:inline-block; padding:.1rem .4rem; border-radius:8px; transition:background .15s, transform .15s; }
.rt-glyph:hover{ background:color-mix(in srgb,var(--r-blue) 14%,transparent); transform:scale(1.12); }

/* ---- Carte (leaflet) ---- */
.rt-map{ height:420px; width:100%; border-radius:16px; overflow:hidden; border:1px solid var(--border); }

/* ---- Lecteur RSVP (RayoRead) ---- */
.rt-rsvp-word{
  background:#070b18; color:#fff; width:100%; height:min(46vh,380px);
  display:flex; align-items:center; justify-content:center; border-radius:18px;
  font-size:clamp(2.5rem,12vw,7rem); font-weight:800; letter-spacing:-.02em;
  user-select:none; margin:1.2rem 0; border:1px solid var(--border);
}

@media (prefers-reduced-motion: reduce){ .rt-progress > i, .rt-toast{ transition:none; } }