/* caht — socle commun : typographie système (SF sur Apple, Segoe sur Windows), palette inspirée d'Apple, chat animé, boutons */
@font-face { font-family: "Caht Amiri"; src: url("/fonts/Amiri-Regular.woff2") format("woff2"), url("/fonts/Amiri-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Caht Quran"; src: url("/fonts/AmiriQuran-Regular.woff2") format("woff2"), url("/fonts/AmiriQuran-Regular.ttf") format("truetype"); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+06DD-06DE; }

:root {
  --bg: #f5f5f7;             /* fond des écrans et des bandes */
  --panel: #ffffff;
  --panel-2: #f5f5f7;
  --line: #d2d2d7;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --accent: #0071e3;          /* boutons */
  --link: #0066cc;
  --accent-soft: #e8f1fc;
  --ok: #17702f; --ok-soft: #e6f4ea;
  --warn: #8a5300; --warn-soft: #fdf3e1;
  --danger: #c4281c; --danger-soft: #fdecea;
  --cat: #1d1d1f; --cat-eye: #ffffff;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .05);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .12);
  --r-xl: 30px; --r-lg: 22px; --r-md: 18px; --r-sm: 12px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif;   /* textes cités */
  --ar: "Caht Amiri", "Geeza Pro", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --quran: "Caht Quran", "Caht Amiri", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --bg: #000000; --panel: #1d1d1f; --panel-2: #2c2c2e; --line: #424245; --ink: #f5f5f7; --ink-2: #d2d2d7; --muted: #86868b;
    --accent: #0a6fd6; --link: #2997ff; --accent-soft: #0f2a47; --ok: #30d158; --ok-soft: #0f2e1a; --warn: #ffb340;
    --warn-soft: #3a2a10; --danger: #ff6961; --danger-soft: #3d1715; --cat: #f5f5f7; --cat-eye: #1d1d1f;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --bg: #000000; --panel: #1d1d1f; --panel-2: #2c2c2e; --line: #424245; --ink: #f5f5f7; --ink-2: #d2d2d7; --muted: #86868b;
  --accent: #0a6fd6; --link: #2997ff; --accent-soft: #0f2a47; --ok: #30d158; --ok-soft: #0f2e1a; --warn: #ffb340;
  --warn-soft: #3a2a10; --danger: #ff6961; --danger-soft: #3d1715; --cat: #f5f5f7; --cat-eye: #1d1d1f;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.47;
       letter-spacing: -.022em; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.ar { font-family: var(--ar); direction: rtl; text-align: right; font-size: 20px; line-height: 2; }
.ar.quran { font-family: var(--quran); }

/* ------------------------------------------------------------------ le chat (logo animé) */
.cat { display: block; overflow: visible; }
.cat .c-body, .cat .c-pupil { fill: var(--cat); }
.cat .c-white { fill: var(--cat-eye); }
.cat .c-whisk { stroke: var(--cat); }
.cat .c-eye { transform-box: view-box; transition: transform .12s ease; }
.cat .c-eye.l { transform-origin: 490px 725px; }
.cat .c-eye.r { transform-origin: 765px 725px; }
.cat .c-pupils { transition: transform .35s ease; }
.cat.blink .c-eye { animation: blink .32s ease-in-out 1; }
@keyframes blink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(.08); } }
.cat.searching .c-pupils { animation: scan 2.2s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translateX(-38px); } 50% { transform: translateX(38px); } }
.cat.searching .c-whisk { animation: twitch 2.2s ease-in-out infinite; transform-box: view-box; transform-origin: 627px 760px; }
@keyframes twitch { 0%, 40%, 100% { transform: translateY(0); } 48% { transform: translateY(-6px); } 56% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cat.blink .c-eye, .cat.searching .c-pupils, .cat.searching .c-whisk { animation: none; }
}

/* ------------------------------------------------------------------ boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 980px; height: 44px;
       padding: 0 22px; font-weight: 500; font-size: 17px; letter-spacing: -.022em; text-decoration: none; background: var(--accent);
       color: #fff; transition: background-color .15s; }
.btn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn.dark { background: var(--ink); color: var(--panel); }
.btn.ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.btn.ghost:hover { background: var(--accent); color: #fff; box-shadow: none; }
.btn.small { height: 34px; padding: 0 16px; font-size: 14px; letter-spacing: -.01em; }
.btn.wide { width: 100%; }

.toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); background: var(--ink); color: var(--panel);
         padding: 11px 18px; border-radius: 18px; font-size: 14px; z-index: 80; box-shadow: var(--shadow-lg); max-width: min(520px, 92%);
         text-align: center; }

/* validation des formulaires */
input.ok-champ, select.ok-champ, textarea.ok-champ { border-color: var(--ok) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317702f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }
input[type=checkbox].ok-champ { background-image: none; padding-right: 0; }
input.err-champ, select.err-champ, textarea.err-champ { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-soft); }
.aide-champ { color: var(--danger); font-size: 13.5px; margin: 4px 2px 0; }
.jauge-mdp { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.jauge-mdp span { flex: 1; height: 5px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.jauge-mdp span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; transition: width .2s, background .2s; }
.jauge-mdp[data-f="1"] span::after { width: 25%; background: var(--danger); }
.jauge-mdp[data-f="2"] span::after { width: 50%; background: var(--warn); }
.jauge-mdp[data-f="3"] span::after { width: 75%; background: var(--ok); }
.jauge-mdp[data-f="4"] span::after { width: 100%; background: var(--ok); }
.pot-de-miel { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap; opacity: 0; }
code { overflow-wrap: anywhere; }