/* Pages SEO statiques — identité « deux voix, un terrain commun ».
   Mêmes jetons que client/src/index.css ; propriétés logiques partout pour
   que la mise en page s'inverse d'elle-même en arabe (dir="rtl"). */

@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url('/seo/fonts/readex-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url('/seo/fonts/readex-arabic.woff2') format('woff2-variations');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/seo/fonts/bricolage-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  --canvas: #eef3f1;
  --surface: #ffffff;
  --surface-2: #f6f9f8;
  --ink: #16211f;
  --muted: #63726e;
  --line: #dae2df;
  --commun: #1e8c78;
  --commun-ink: #176354;
  --commun-soft: #ecf8f4;
  --cobalt: #3b5bdb;
  --cobalt-soft: #eef2fd;
  --safran: #e8a33d;
  --night: #0f2a2e;
  color-scheme: light;
}

:root.dark {
  --canvas: #0b191b;
  --surface: #112426;
  --surface-2: #162d2f;
  --ink: #eaf2f0;
  --muted: #8ca29d;
  --line: #243c3e;
  --commun-ink: #6bc6ae;
  --commun-soft: #12413a;
  --cobalt-soft: #212f66;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --canvas: #0b191b;
    --surface: #112426;
    --surface-2: #162d2f;
    --ink: #eaf2f0;
    --muted: #8ca29d;
    --line: #243c3e;
    --commun-ink: #6bc6ae;
    --commun-soft: #12413a;
    --cobalt-soft: #212f66;
    color-scheme: dark;
  }
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .brand span {
  font-family: 'Bricolage Grotesque', 'Readex Pro', system-ui, sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
/* Bricolage n'a pas de glyphes arabes : on garde Readex pour toute la page. */
:lang(ar) h1, :lang(ar) h2, :lang(ar) .brand span { font-family: 'Readex Pro', system-ui, sans-serif; letter-spacing: 0; }

a { color: var(--commun-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--safran); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 46rem; margin-inline: auto; padding-inline: 1rem; }

/* En-tête */
.top { background: var(--night); color: #eaf2f0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.875rem; max-width: 72rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.125rem; }
.top-actions { display: flex; align-items: center; gap: 1rem; font-size: 0.9375rem; }
.top a { color: #eaf2f0; }
.lang { display: flex; gap: 0.25rem; }
.lang a, .lang span { padding: 0.125rem 0.5rem; border-radius: 999px; text-decoration: none; font-size: 0.8125rem; font-weight: 600; }
.lang span { background: rgba(255, 255, 255, 0.14); }
.lang a:hover { background: rgba(255, 255, 255, 0.08); }

/* Héros : signature de marque, sombre dans les deux thèmes */
.hero { background: var(--night); color: #eaf2f0; padding-block: 1.5rem 2.75rem; border-block-end: 4px solid var(--commun); }
.hero h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); margin: 0.5rem 0 1rem; text-wrap: balance; }
.lead { font-size: 1.125rem; color: #c9dad6; margin: 0 0 1.5rem; max-width: 40rem; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0; font-size: 0.875rem; color: #9fb8b2; }
.crumbs li + li::before { content: '›'; margin-inline-end: 0.25rem; opacity: 0.6; }
:dir(rtl) .crumbs li + li::before { content: '‹'; }
.crumbs a { color: #c9dad6; }

.cta {
  display: inline-block;
  background: var(--commun);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
}
.cta:hover { background: #22917a; }

/* Contenu */
.content { padding-block: 2rem 3rem; }
.content h2 { font-size: 1.4rem; margin: 2.25rem 0 0.75rem; }
.content p { margin: 0 0 1rem; }

.answer { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--commun); border-radius: 0.75rem; padding: 1rem 1.25rem; }
.answer p { margin: 0; }
.answer .answer-label { font-weight: 700; color: var(--commun-ink); margin-block-end: 0.25rem; }

.note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.875rem 1.125rem; color: var(--muted); }

.list { padding-inline-start: 1.25rem; margin: 0 0 1rem; }
.list li { margin-block: 0.25rem; }

/* Exemple : la voix de la Partie A (cobalt), puis la version validée (terrain commun) */
.example { margin: 0; display: grid; gap: 0.75rem; }
.bubble { border-radius: 1rem; padding: 0.875rem 1.125rem; border: 1px solid var(--line); background: var(--surface); }
.bubble p { margin: 0; }
.bubble .label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-block-end: 0.25rem; }
.bubble.raw { border-inline-start: 4px solid var(--cobalt); background: var(--cobalt-soft); }
.bubble.sent { border-inline-start: 4px solid var(--commun); }
.bubble .stamp { font-size: 0.8125rem; color: var(--commun-ink); margin-block-start: 0.5rem; font-weight: 600; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.875rem 1rem; }
.steps li::before { content: counter(step); grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--commun-soft); color: var(--commun-ink); font-weight: 700; }
.steps strong { display: block; }
.steps span { color: var(--muted); font-size: 0.9875rem; }

.faq { display: grid; gap: 0.5rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.75rem 1rem; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 0.5rem 0 0; color: var(--muted); }

.links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.links li { display: inline-flex; flex-direction: column; }
.links a { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.375rem 0.875rem; text-decoration: none; font-size: 0.9375rem; }
.links a:hover { border-color: var(--commun); }
.links span { font-size: 0.8125rem; color: var(--muted); padding-inline-start: 0.875rem; }

.closing { margin-block-start: 3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; }
.closing h2 { margin-top: 0; }

/* Pied de page */
.foot { border-block-start: 1px solid var(--line); padding-block: 2rem; font-size: 0.9375rem; color: var(--muted); }
.foot .wrap { max-width: 72rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.5rem; }
.foot-title { font-weight: 700; color: var(--ink); margin: 0 0 0.5rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.tagline { display: flex; align-items: center; gap: 0.5rem; margin: 2rem 0 0.25rem; }
.legal { margin: 0; font-size: 0.875rem; }

@media (min-width: 40rem) {
  .example { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 30rem) {
  .login { display: none; }
}