/* Nous deux : jetons de couleur, typographie, boutons et champs. Clair / sombre selon le telephone. */
:root {
  color-scheme: light dark;
  --fond: #f6f2f4;
  --surface: #ffffff;
  --surface-2: #f1ebef;
  --surface-3: #e7dfe5;
  --encre: #231a26;
  --encre-2: #5b4e60;
  --encre-3: #847689;
  --trait: rgb(35 26 38 / 0.11);
  --accent: #7b2d5b;
  --accent-appui: #65224a;
  --accent-doux: #f5e4ee;
  --sur-accent: #ffffff;
  --danger: #b3261e;
  --danger-doux: #fde8e6;
  --succes: #1d7a55;
  --koray: #13857f;
  --esma: #d1386c;
  --ombre-1: 0 1px 2px rgb(35 26 38 / 0.07), 0 6px 16px rgb(35 26 38 / 0.09);
  --ombre-2: 0 2px 8px rgb(35 26 38 / 0.08), 0 20px 44px rgb(35 26 38 / 0.16);
  --ombre-feuille: 0 -2px 10px rgb(35 26 38 / 0.06), 0 -18px 40px rgb(35 26 38 / 0.10);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --police-ronde: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-grand: 28px;
  --r-moyen: 18px;
  --r-petit: 12px;
  --s-haut: env(safe-area-inset-top, 0px);
  --s-bas: env(safe-area-inset-bottom, 0px);
  --s-gauche: env(safe-area-inset-left, 0px);
  --s-droite: env(safe-area-inset-right, 0px);
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #141016;
    --surface: #1e1821;
    --surface-2: #29222d;
    --surface-3: #352c3a;
    --encre: #f5eff6;
    --encre-2: #bfb3c4;
    --encre-3: #95889b;
    --trait: rgb(245 239 246 / 0.12);
    --accent: #f0a2c8;
    --accent-appui: #f7c0db;
    --accent-doux: #3b2433;
    --sur-accent: #2a0f1f;
    --danger: #ff8a80;
    --danger-doux: #3d1d1b;
    --succes: #6fd3a5;
    --ombre-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px rgb(0 0 0 / 0.35);
    --ombre-2: 0 2px 8px rgb(0 0 0 / 0.4), 0 22px 48px rgb(0 0 0 / 0.5);
    --ombre-feuille: 0 -2px 10px rgb(0 0 0 / 0.3), 0 -18px 40px rgb(0 0 0 / 0.35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--fond);
  color: var(--encre);
  font: 400 16px/1.45 var(--police);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  caret-color: var(--accent);
}
::selection { background: var(--accent-doux); color: var(--encre); }
h1, h2, h3 { margin: 0; font-family: var(--police-ronde); text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-grand { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:focus { outline: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; width: 100%; padding: 0 20px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 17px; letter-spacing: -0.005em;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: transform 160ms var(--sortie), background-color 160ms, opacity 160ms;
}
.bouton:active { transform: scale(0.97); }
.bouton:disabled { opacity: 0.55; cursor: default; transform: none; }
.bouton-plein { background: var(--accent); color: var(--sur-accent); box-shadow: 0 1px 0 rgb(255 255 255 / 0.15) inset, 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.bouton-plein:active { background: var(--accent-appui); }
.bouton-second { background: var(--surface-2); color: var(--encre); width: auto; }
.bouton-texte { background: transparent; color: var(--accent); min-height: 48px; font-weight: 600; font-size: 16px; }
.bouton-danger { background: var(--danger-doux); color: var(--danger); }
.bouton-danger.confirmer { background: var(--danger); color: #fff; }
.bouton-mini { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--encre); font-weight: 600; font-size: 15px; cursor: pointer; }
.bouton-icone {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--encre-2); cursor: pointer;
}
.bouton.occupe { pointer-events: none; }
.bouton.occupe::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: tourne 700ms linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Champs : 16 px minimum pour que l'iPhone ne zoome pas */
input[type="text"], input[type="search"] {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1.5px solid var(--trait); border-radius: var(--r-petit);
  background: var(--surface); color: var(--encre); font: 400 16px var(--police);
  transition: border-color 160ms;
}
input[type="text"]:focus { border-color: var(--accent); outline: none; }
input::placeholder { color: var(--encre-3); }
label.etiquette { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--encre-2); }

input[type="range"] { width: 100%; height: 44px; accent-color: var(--accent); background: transparent; }

.erreur {
  padding: 12px 14px; border-radius: var(--r-petit);
  background: var(--danger-doux); color: var(--danger); font-size: 15px; font-weight: 500;
}
.erreur-centre { text-align: center; }

/* Message bref en bas d'ecran */
.message {
  position: fixed; left: 50%; bottom: calc(24px + var(--s-bas)); z-index: 2000;
  transform: translateX(-50%); max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 999px;
  background: var(--encre); color: var(--fond); font-size: 15px; font-weight: 500; text-align: center;
  box-shadow: var(--ombre-2); animation: monte 260ms var(--sortie);
}
@keyframes monte { from { transform: translate(-50%, 12px); opacity: 0; } }

/* Bandeau de mise a jour */
.bandeau {
  position: fixed; z-index: 1900; left: 12px; right: 12px; top: calc(10px + var(--s-haut));
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px;
  border-radius: var(--r-moyen); background: var(--surface); color: var(--encre);
  box-shadow: var(--ombre-2); font-size: 15px; font-weight: 500;
  animation: descend 320ms var(--sortie);
}
.bandeau span { flex: 1; }
.bandeau.refus { background: var(--danger); color: #fff; padding: 14px 16px; }
@keyframes descend { from { transform: translateY(-14px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}