/* =====================================================================
   DYS.MA : habillage PUBLIC « Bleu DYS.MA » (site public, connexion, inscription).
   Chargé par la seule mise en page publique ; chaque règle est bornée par `body.site`.
   Les couleurs viennent des jetons publics (`--pub-*`) de tokens.css.
   ===================================================================== */

body.site { background: var(--pub-bg); color: var(--pub-text); }
body.site a:focus-visible, body.site button:focus-visible, body.site .btn:focus-visible { outline-color: var(--pub-accent); }
body.site .is-directional { flex: none; }
html[dir="rtl"] body.site .is-directional { transform: scaleX(-1); }

/* ---------- Boutons : un accent, aucun dégradé ---------- */
body.site .btn-primary { color: var(--pub-on-accent); background: var(--pub-accent); border-color: var(--pub-accent); box-shadow: none; }
body.site .btn-primary:hover { color: var(--pub-on-accent); background: var(--pub-accent-strong); border-color: var(--pub-accent-strong); transform: none; }
body.site .btn-ink { color: var(--pub-on-accent); background: var(--pub-accent); }
body.site .btn-ink:hover { color: var(--pub-on-accent); background: var(--pub-accent-strong); }
body.site .btn-secondary { color: var(--pub-accent); background: var(--pub-card); border-color: var(--pub-accent); }
body.site .btn-secondary:hover { color: var(--pub-accent-strong); background: var(--pub-accent-soft); border-color: var(--pub-accent-strong); }
body.site .btn-ghost { color: var(--pub-accent); }
body.site .btn-ghost:hover { color: var(--pub-accent-strong); background: var(--pub-accent-soft); }
body.site .topbar { background: var(--pub-card); border-bottom-color: var(--pub-line); }
body.site .nav-links a:hover, body.site .topbar-login:hover { color: var(--pub-accent); }

/* ---------- Étiquettes, champs, blocs : une seule teinte douce ---------- */
body.site .tag-em, body.site .tag-ink, body.site .tag-am { background: var(--pub-accent-soft); color: var(--pub-accent); }
body.site .tag-line { background: var(--pub-card); border-color: var(--pub-line); color: var(--pub-text-2); }
body.site .input { background: var(--pub-card); border-color: var(--pub-line-strong); color: var(--pub-text); }
body.site .input:focus-visible { border-color: var(--pub-accent); background: var(--pub-card); }
body.site .card { background: var(--pub-card); border-color: var(--pub-line); }
body.site .card-ico--em, body.site .card-ico--am, body.site .card-ico--ink { background: var(--pub-accent-soft); color: var(--pub-accent); }
body.site .progress > span { background: var(--pub-accent); }
body.site .choice:hover { background: var(--pub-accent-soft); }
body.site .grid-ruled > * { background: var(--pub-bg); }

/* ---------- Zones sombres conservées : bleu nuit, texte clair, accent clair ---------- */
body.site .hero { background: radial-gradient(130% 120% at 88% -10%, var(--pub-dark-2) 0%, var(--pub-dark-1) 58%); color: var(--pub-on-dark); }
body.site .hero h1 { color: var(--pub-on-dark); }
body.site .hero .kicker, body.site .hero .kicker .bar { color: var(--pub-accent-on-dark); }
body.site .hero .kicker .bar { background: var(--pub-accent-on-dark); }
body.site .trace-line { stroke: var(--pub-accent-on-dark); filter: none; }
body.site .trace-nodes { fill: var(--pub-accent-on-dark); }
body.site .trace-node-end { fill: var(--pub-accent-on-dark); transform-origin: 560px 80px; filter: none; }
body.site .cta-final { background: linear-gradient(135deg, var(--pub-dark-1), var(--pub-dark-2)); color: var(--pub-on-dark); }
body.site .cta-final h2 { color: var(--pub-on-dark); }
body.site .cta-final p { color: var(--pub-on-dark); }
body.site .on-dark .btn-primary, body.site .on-dark .btn-ink, body.site .cta-final .btn-primary, body.site .cta-final .btn-ink { color: var(--pub-dark-1); background: var(--pub-card); }
body.site .on-dark .btn-primary:hover, body.site .on-dark .btn-ink:hover, body.site .cta-final .btn-primary:hover, body.site .cta-final .btn-ink:hover { color: var(--pub-dark-1); background: var(--pub-accent-soft); }
body.site .on-dark .btn-secondary, body.site .cta-final .btn-secondary { color: var(--pub-on-dark); border-color: var(--pub-on-dark); background: transparent; }
body.site .on-dark .btn-secondary:hover { color: var(--pub-on-dark); background: var(--pub-dark-2); }

/* ---------- Accueil ---------- */
body.site .home-h2 { font-size: clamp(26px, 3vw, 36px); margin: var(--s3) 0 var(--s6); }
body.site .home-situation { padding-bottom: var(--s7); }
body.site .home-grid { gap: var(--s5); }
body.site .home-grid .choice { padding: 0; }
body.site .choice-text { display: block; padding: 18px 20px; }
body.site .home-grid .arw { padding-inline-end: 20px; }
body.site .steps-grid { gap: var(--s5); list-style: none; margin: 0; padding: 0; }
body.site .step-card { padding: var(--s6); }
body.site .step-num { display: block; font-family: var(--font-head); font-size: 44px; line-height: 1; color: var(--pub-accent); margin-bottom: var(--s4); }
body.site .step-card h3 { font-size: 20px; margin-bottom: var(--s2); }
body.site .step-card p { color: var(--pub-text-2); }
body.site .cta-section { padding-top: 0; }

/* ---------- Bloc « Vos données sont protégées » ---------- */
body.site .protect { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
body.site .protect-lang { background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--r-md); padding: var(--s5); display: grid; gap: var(--s3); align-content: start; }
body.site .protect-lang:first-child { grid-column: 1 / -1; background: var(--pub-band); }
body.site .protect-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pub-accent); }
body.site .protect-lang[dir="rtl"] .protect-tag { letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) { body.site .protect { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Écritures non latines : polices auto-hébergées ---------- */
body.site :lang(ar), body.site :lang(ary) { font-family: 'Readex Pro', system-ui, sans-serif; }
body.site :lang(zgh) { font-family: 'Noto Sans Tifinagh', system-ui, sans-serif; }

/* ---------- Mobile 360 px : barre du haut compacte (mêmes éléments, mêmes comportements) ---------- */
@media (max-width: 640px) {
  body.site .topbar-inner { gap: 8px; }
  body.site .brand { font-size: 19px; gap: 8px; }
  body.site .brand svg { width: 24px; height: 24px; }
  body.site .topbar .topbar-cta { font-size: 12px; padding: 8px 10px; min-width: 0; }
  body.site .topbar .nav-toggle { padding: 9px 10px; min-width: 0; }
}

/* ---------- Réservation publique : même palette que le site ---------- */
body.site.booking { background: var(--pub-bg); }
body.site.booking .bk-head { background: var(--pub-card); border-bottom-color: var(--pub-line); }
body.site.booking .bk-brand { color: var(--pub-accent); }
body.site.booking .bk-head-note, body.site.booking .bk-lead, body.site.booking .bk-summary dt, body.site.booking .bk-help { color: var(--pub-text-2); }
body.site.booking .bk-title { color: var(--pub-text); }
body.site.booking .bk-step { background: var(--pub-accent-soft); color: var(--pub-accent); }
body.site.booking .bk-step.is-current { background: var(--pub-accent); color: var(--pub-on-accent); }
body.site.booking .bk-step.is-done { background: var(--pub-band); color: var(--pub-accent); }
body.site.booking .bk-panel, body.site.booking .bk-card, body.site.booking .bk-day, body.site.booking .bk-slot { background: var(--pub-card); border-color: var(--pub-line); }
body.site.booking .bk-card:hover, body.site.booking .bk-card.is-chosen, body.site.booking .bk-slot:hover { border-color: var(--pub-accent); background: var(--pub-accent-soft); }
body.site.booking .bk-day.is-chosen, body.site.booking .bk-slot.is-chosen { background: var(--pub-accent); border-color: var(--pub-accent); color: var(--pub-on-accent); }
body.site.booking .bk-avatar { background: var(--pub-accent); }
body.site.booking .bk-note, body.site.booking .bk-ref b { background: var(--pub-band); color: var(--pub-text); }
body.site.booking .bk-note--warning { background: var(--pub-accent-soft); color: var(--pub-accent); }
body.site.booking .bk-note--success { background: var(--pub-accent-soft); color: var(--pub-accent); }
body.site.booking .bk-note--error { background: var(--pub-alert-soft); color: var(--pub-alert); }
body.site.booking .bk-btn { border-color: var(--pub-accent); color: var(--pub-accent); background: var(--pub-card); min-height: 48px; }
body.site.booking .bk-btn:hover { background: var(--pub-accent-soft); }
body.site.booking .bk-btn--pri { background: var(--pub-accent); border-color: var(--pub-accent); color: var(--pub-on-accent); }
body.site.booking .bk-field input, body.site.booking .bk-field select, body.site.booking .in { border-color: var(--pub-line-strong); background: var(--pub-card); min-height: 48px; }
body.site.booking .bk-field-msg { color: var(--pub-alert); }
body.site.booking .bk-link { width: 100%; }
body.site.booking .bk-optional { margin-block: var(--s4); }
body.site.booking .bk-optional > summary { cursor: pointer; font-weight: 600; color: var(--pub-accent); min-height: 44px; display: flex; align-items: center; }
body.site.booking .bk-account { border-color: var(--pub-accent); margin-block-start: var(--s5); }

/* ---------- Accueil institutionnel ---------- */
body.site .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s7); align-items: center; padding-block: clamp(40px, 6vw, 88px); }
body.site .hero-grid .hero-content { padding-block: 0; max-width: none; }
body.site .hero h1 { font-size: clamp(32px, 4.4vw, 56px); }
body.site .hero-note { display: flex; gap: 8px; align-items: center; }
body.site .hero-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-inline-start: 1px solid var(--pub-accent-on-dark); }
body.site .hero-stages li { position: relative; display: flex; align-items: center; gap: var(--s4); padding: 14px 0 14px var(--s5); font-family: var(--font-head); font-size: 20px; color: var(--pub-on-dark); }
body.site .hero-stage-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-inline-start: -46px; border-radius: var(--r-pill); background: var(--pub-dark-1); border: 1px solid var(--pub-accent-on-dark); color: var(--pub-accent-on-dark); font-family: var(--font-body); font-size: 14px; font-weight: 700; }
body.site .hero-stages li { padding-inline-start: var(--s6); }

body.site .bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
body.site .bento-item { grid-column: span 1; }
body.site .bento-item.bento-wide { grid-column: span 2; }
body.site .bento-item > a { display: flex; flex-direction: column; gap: var(--s2); height: 100%; padding: var(--s5); background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--r-md); color: var(--pub-text); text-decoration: none; transition: border-color var(--f-dur) var(--f-ease), background var(--f-dur) var(--f-ease); }
body.site .bento-item > a:hover { border-color: var(--pub-accent); background: var(--pub-accent-soft); }
body.site .bento-item h3 { font-size: 20px; }
body.site .bento-item p { color: var(--pub-text-2); font-size: 15px; flex: 1; }
body.site .bento-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--pub-accent); margin-top: var(--s2); }
body.site .bento-note { margin-top: var(--s5); font-size: 14px; color: var(--pub-text-2); max-width: 78ch; }

body.site .dim { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s7); align-items: center; padding-block: var(--s7); border-top: 1px solid var(--pub-line-strong); }
body.site .dim:first-of-type { margin-top: var(--s5); }
body.site .dim-reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
body.site .dim-reverse .dim-art { order: 2; }
body.site .dim-art { display: flex; align-items: center; justify-content: center; padding: var(--s6); background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--r-md); color: var(--pub-accent); }
body.site .ill { width: min(100%, 220px); height: auto; }
body.site .ill-fill { fill: var(--pub-accent-soft); }
body.site .dim-body h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: var(--s2); }
body.site .dim-lead { color: var(--pub-text-2); font-size: 17px; margin-bottom: var(--s4); max-width: 60ch; }
body.site .dim-list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s2); }
body.site .dim-list li { display: flex; gap: 10px; align-items: flex-start; }
body.site .dim-list svg { flex: none; margin-top: 4px; color: var(--pub-accent); }

body.site .journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5); counter-reset: j; }
body.site .journey li { position: relative; padding-top: var(--s6); border-top: 2px solid var(--pub-accent); }
body.site .journey-n { position: absolute; top: -17px; inset-inline-start: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--pub-accent); color: var(--pub-on-accent); font-weight: 700; }
body.site .journey h3 { font-size: 20px; margin-bottom: var(--s2); }
body.site .journey p { color: var(--pub-text-2); font-size: 15px; }
body.site .journey-note { margin-top: var(--s6); color: var(--pub-text-2); max-width: 70ch; }

body.site .finder { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); align-items: center; }
body.site .finder-form { display: grid; gap: var(--s4); padding: var(--s6); }
body.site .finder-form .field label { font-weight: 600; }

body.site .res-grid { gap: var(--s4); }
body.site .res-item { display: block; padding: var(--s5); background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: var(--r-md); color: var(--pub-text); text-decoration: none; transition: border-color var(--f-dur) var(--f-ease); }
body.site .res-item:hover { border-color: var(--pub-accent); }
body.site .res-item h3 { font-size: 20px; margin-bottom: var(--s2); }
body.site .res-item p { color: var(--pub-text-2); font-size: 15px; }

@media (max-width: 1100px) {
  body.site .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.site .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s6); }
}
@media (max-width: 900px) {
  body.site .hero-grid, body.site .finder { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  body.site .dim, body.site .dim-reverse { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  body.site .dim-reverse .dim-art { order: 0; }
}
@media (max-width: 640px) {
  body.site .bento, body.site .journey { grid-template-columns: minmax(0, 1fr); }
  body.site .bento-item.bento-wide { grid-column: span 1; }
  body.site .hero-stages li { font-size: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  body.site .dim.is-in .ill { animation: rise .7s ease-out both; }
}
body.site .hero .trace { opacity: .3; }
body.site .hero-stages { position: relative; z-index: var(--ds-z-raised); }

/* Pied de page : en bas de fenêtre sur les pages courtes, après le contenu sur les pages longues. */
body.site { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.site > main { flex: 1 0 auto; }
body.site > .site-footer { flex: none; }
body.site .sf-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 860px) { body.site .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { body.site .sf-cols { grid-template-columns: minmax(0, 1fr); } }