/* Charte Yaora — couleurs relevées sur les logos validés (clair et sombre).
   --green est la couleur du « o » : usage graphique et grands textes.
   --green-ink est la variante lisible pour les liens et les fonds de bouton (AA). */
:root {
  color-scheme: light;
  --navy: #212e40;
  --night: #152739;
  --paper: #f8f9f6;

  --bg: var(--paper);
  --surface: #ffffff;
  --ink: var(--navy);
  --ink-soft: #4b5869;
  --line: #d9ddd8;
  --green: #3d9b74;
  --green-ink: #277553;
  --green-wash: #e6f1ec;
  --on-green: var(--paper);

  --logo-ink: var(--navy);
  --logo-o: #3d9b74;
  --logo-bubble: var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: var(--night);
    --surface: #1c3247;
    --ink: var(--paper);
    --ink-soft: #b4bfcb;
    --line: #2c4359;
    --green: #46b480;
    --green-ink: #46b480;
    --green-wash: #1b3a3f;
    --on-green: var(--night);
    --logo-ink: var(--paper);
    --logo-o: #46b480;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--night);
  --surface: #1c3247;
  --ink: var(--paper);
  --ink-soft: #b4bfcb;
  --line: #2c4359;
  --green: #46b480;
  --green-ink: #46b480;
  --green-wash: #1b3a3f;
  --on-green: var(--night);
  --logo-ink: var(--paper);
  --logo-o: #46b480;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
}
.skip-link:focus {
  top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Logo (masques du PNG validé) ---------- */

/* ---------- Contrôles ---------- */
.theme-toggle, .lang { display: inline-grid; place-items: center; height: 2.75rem; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle { width: 2.75rem; padding: 0; border-radius: 50%; }
.theme-toggle svg { transition: transform .3s ease; }
.theme-toggle[aria-pressed='true'] svg { transform: rotate(180deg); }
.lang { min-width: 2.75rem; padding: 0 .75rem; border-radius: 999px; font: 600 .875rem/1 inherit; letter-spacing: .02em; text-decoration: none; }
.theme-toggle:hover, .lang:hover { border-color: var(--ink); }

/* ---------- Barre de comparaison (maquettes uniquement) ---------- */

/* =========================================================
   Mix A + B : bulle, conversation, aiguilles, boucle
   ========================================================= */
:root {
  --bubble: 1.6rem 1.6rem 3px 1.6rem;     /* pointe en bas à droite */
  --bubble-sm: 20px 20px 3px 20px;
  --bubble-sm-l: 20px 20px 20px 3px;      /* pointe en bas à gauche */
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: var(--bubble);
  background: var(--green-ink);
  color: var(--on-green);
  font-family: var(--display, inherit);
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .9rem;
  border-radius: 999px 999px 3px 999px;
  background: var(--green-wash);
  color: var(--green-ink);
  font-weight: 700;
}

/* Carte de conversation */
.chat {
  margin: 0;
  padding: 1rem;
  border-radius: 28px;
  background: var(--surface);
  border: 1.5px solid var(--line);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .25rem .25rem 1rem;
  border-bottom: 1.5px solid var(--line);
  font-weight: 600;
}
.avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--green-wash);
  color: var(--green-ink);
  font-family: var(--display, inherit);
  font-weight: 600;
}
.messages {
  list-style: none;
  margin: 0;
  padding: 1rem .25rem .5rem;
  display: grid;
  gap: .6rem;
}
.msg {
  max-width: 85%;
  padding: .7rem 1rem;
}
.msg p { margin: 0; }
.msg.client { justify-self: start; background: var(--bg); border-radius: var(--bubble-sm-l); }
.msg.pro { justify-self: end; background: var(--green-wash); border-radius: var(--bubble-sm); }
.slots {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .6rem 0 0;
  padding: 0;
}
.slots li {
  padding: .3rem .75rem;
  border-radius: 999px 999px 3px 999px;
  border: 1.5px solid var(--green-ink);
  color: var(--green-ink);
  font-weight: 600;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  transition: background-color .3s ease, color .3s ease;
}
.chat figcaption {
  padding: .5rem .25rem 0;
  color: var(--ink-soft);
  font-size: .875rem;
}

/* Boucle : les messages n'apparaissent qu'une fois la boucle active (JS).
   Sans JS ou en mouvement réduit, tout reste visible. */
/* translate / scale (et non transform) pour garder les rotations propres à chaque élément */
[data-loop].is-looping [data-msg] {
  opacity: 0;
  translate: 0 10px;
  scale: .97;
  transition: opacity .45s cubic-bezier(.2,.8,.2,1), translate .45s cubic-bezier(.2,.8,.2,1), scale .45s cubic-bezier(.2,.8,.2,1);
}
[data-loop].is-looping [data-msg].is-on { opacity: 1; translate: 0 0; scale: 1; }
[data-loop].is-looping[data-phase='out'] [data-msg].is-on { opacity: 0; translate: 0 -6px; }
[data-loop].is-looping .slots .picked { background: transparent; color: var(--green-ink); }
[data-loop]:not(.is-looping) .slots .picked,
[data-loop][data-phase='picked'] .slots .picked,
[data-loop][data-phase='confirmed'] .slots .picked {
  background: var(--green-ink);
  color: var(--on-green);
}

/* Le « o » et ses aiguilles */
.o-mark svg { width: 100%; height: auto; overflow: visible; }
.o-mark .ring { fill: var(--green); }
.o-mark .bubble { fill: var(--logo-bubble); }
.o-mark .hand { stroke: var(--navy); stroke-linecap: round; }
.o-mark .hand.hour { stroke-width: 8; }
.o-mark .hand.min { stroke-width: 5.5; }
.o-mark .pin { fill: var(--green); stroke: var(--navy); stroke-width: 3; }

/* Bouton pause de l'animation */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 2.25rem;
  padding: 0 .85rem 0 .65rem;
  border: 1.5px solid var(--line);
  border-radius: 999px 999px 3px 999px;
  background: var(--bg);
  color: var(--ink-soft);
  font: 600 .8125rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.motion-toggle:hover { color: var(--ink); border-color: var(--ink); }
.motion-toggle .i-play { display: none; }
.motion-toggle[aria-pressed='true'] .i-play { display: block; }
.motion-toggle[aria-pressed='true'] .i-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}

/* Avant / après (repris du modèle C) */
.board { display: grid; gap: 1rem; }
.board .panel { border-radius: 28px; padding: 1.5rem; }
.board .label { margin: 0; font-family: var(--display, inherit); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.board .panel > p:not(.label):not(.day) { margin: .35rem 0 1.5rem; color: var(--ink-soft); max-width: 32ch; }
.board .before { background: var(--surface); border: 1.5px solid var(--line); overflow: hidden; }
.pile { list-style: none; margin: 0; padding: .5rem 0 1rem; display: flex; flex-direction: column; align-items: flex-start; }
.note-msg { position: relative; max-width: 72%; padding: .65rem 1rem; margin: -.15rem 0; border-radius: var(--bubble-sm-l); background: var(--bg); border: 1.5px solid var(--line); font-size: .9375rem; box-shadow: 0 2px 0 var(--line); }
.note-msg:nth-child(1) { transform: rotate(-3deg) translateX(4%); }
.note-msg:nth-child(2) { transform: rotate(2.5deg) translateX(28%); }
.note-msg:nth-child(3) { transform: rotate(-1.5deg) translateX(10%); }
.note-msg:nth-child(4) { transform: rotate(4deg) translateX(36%); }
.note-msg:nth-child(5) { transform: rotate(-2deg) translateX(2%); }
.note-msg time { display: block; font-size: .75rem; color: var(--ink-soft); }
.board .after { background: var(--navy); color: var(--paper); --line: #34465c; }
[data-theme='dark'] .board .after { background: #0f1f2e; }
.board .after > p:not(.label):not(.day) { color: #c3ccd6; }
.board .day { margin: 0 0 .5rem; font-family: var(--display, inherit); font-weight: 600; color: #46b480; }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 4.25rem 1fr auto; align-items: center; gap: .75rem; padding: .8rem 0; border-top: 1.5px solid var(--line); }
.agenda time { font-variant-numeric: tabular-nums; font-weight: 600; color: #c3ccd6; }
.agenda .person { font-weight: 600; }
.agenda .svc { font-size: .875rem; color: #c3ccd6; }
.agenda .free .person { color: #8ea0b3; font-weight: 400; }
.agenda .free { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgb(255 255 255 / .04) 6px 12px); }
.agenda .new { margin: 0 -.75rem; padding: .8rem .75rem; border-radius: 14px 14px 3px 14px; border-top-color: transparent; background: #46b480; color: #152739; }
.agenda .new time, .agenda .new .svc { color: #152739; }
@media (min-width: 860px) {
  .board { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .board .panel { padding: 2.25rem; }
  .note-msg { max-width: none; }
}