:root {
  --ink: #182233;
  --paper: #f5f6f8;
  --paper-raised: #ffffff;
  --brand: #1e4a94;
  --brand-dark: #163a75;
  --gold: #b9852a;
  --line: rgba(24, 34, 51, 0.12);
  --shadow: rgba(24, 34, 51, 0.12);
  --success: #1a7a4c;
  --danger: #b3261e;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
  /* Slightly translucent instead of solid white so the body's watermark still
     reads through cards - opaque cards otherwise hide it almost everywhere. */
  --card-bg: color-mix(in srgb, var(--paper-raised) 91%, transparent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  background-color: var(--paper);
  /* Filigrane "7 ans" : image atténuée via un dégradé translucide superposé
     (pas d'opacité directe sur background-image en CSS). background-attachment
     "scroll" (par défaut) plutôt que "fixed" : plus fiable sur mobile/iOS. */
  background-image:
    linear-gradient(color-mix(in srgb, var(--paper) 89%, transparent), color-mix(in srgb, var(--paper) 89%, transparent)),
    url('/images/logo-7ans.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center bottom;
  background-size: cover, min(60vw, 320px);
}

[dir='rtl'] { text-align: right; }

a { color: var(--brand); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Header ---------- */
.site-header {
  background: linear-gradient(160deg, var(--brand-dark), var(--brand));
  color: #f4efe0;
  padding: 1.25rem 1rem;
  text-align: center;
}
.site-header img.logo { height: 44px; margin-bottom: 0.65rem; background: #fff; border-radius: 6px; padding: 4px; }
.site-header h1 { font-size: 1.15rem; margin: 0.25rem 0 0; font-weight: 600; }
.site-header p.subtitle { margin: 0.35rem 0 0; opacity: 0.85; font-size: 0.85rem; }
@media (min-width: 560px) {
  .site-header { padding: 1.5rem 1.25rem; }
  .site-header img.logo { height: 56px; }
  .site-header h1 { font-size: 1.3rem; }
  .site-header p.subtitle { font-size: 0.9rem; }
}

main { padding: 1.5rem 0 3rem; }

/* ---------- Language picker (mobile-first: stacked, thumb-sized) ---------- */
.lang-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; margin-top: 1.75rem; }
.lang-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  min-height: 64px;
  text-align: center;
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
  box-shadow: 0 6px 18px -12px var(--shadow);
}
.lang-card:active, .lang-card:focus-visible { border-color: var(--brand); outline: none; }
.lang-card .sub { display: block; font-size: 0.78rem; opacity: 0.65; margin-top: 0.3rem; }
@media (min-width: 560px) { .lang-grid { grid-template-columns: 1fr 1fr; } }

.intro-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

/* ---------- Quiz ---------- */
.progress-row { display: flex; justify-content: space-between; font-size: 0.82rem; opacity: 0.7; margin-bottom: 0.4rem; }
.progress-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 1.5rem; }
.progress-fill { height: 100%; background: var(--gold); transition: width 0.2s ease; }

.field { margin-bottom: 1.5rem; }
.field label.field-label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
input[type='text'], input[type='email'] {
  width: 100%; padding: 0.75rem 0.8rem; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 16px; /* >=16px avoids iOS auto-zoom on focus */
  min-height: 48px;
}

.email-capture {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.email-capture p { margin: 0 0 0.85rem; font-size: 0.92rem; }
.success-banner {
  background: #e6f4ec; color: var(--success); border: 1px solid #bfe3cd;
  border-radius: 7px; padding: 0.7rem 1rem; margin-top: 0.85rem; font-size: 0.9rem;
}

.qcard {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.qcard .qnum { font-size: 0.75rem; color: var(--brand); font-weight: 700; letter-spacing: 0.04em; }
.qcard h3 { margin: 0.3rem 0 0.9rem; font-size: 1.05rem; }
.opt {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 0.7rem 0.85rem; margin-bottom: 0.55rem; cursor: pointer;
  min-height: 48px; /* comfortable thumb target */
}
.opt:active, .opt:hover { border-color: var(--brand); }
.opt input { accent-color: var(--brand); width: 1.15rem; height: 1.15rem; flex: none; }
.opt.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--paper-raised)); }

.btn {
  display: block; width: 100%; font: inherit; font-size: 1rem;
  padding: 0.85rem 1.6rem; min-height: 48px; border-radius: 999px; border: none;
  background: var(--brand); color: #fff; cursor: pointer; text-align: center;
}
.btn:active, .btn:hover { background: var(--brand-dark); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.btn-row { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 560px) {
  .btn { width: auto; }
  .btn-row { flex-direction: row; justify-content: flex-end; }
  [dir='rtl'] .btn-row { justify-content: flex-start; }
}

.error-banner {
  background: #fdecea; color: var(--danger); border: 1px solid #f5c6c3;
  border-radius: 7px; padding: 0.7rem 1rem; margin-bottom: 1.25rem; font-size: 0.9rem;
}

/* ---------- Result / certificate ---------- */
.score-summary { text-align: center; margin: 1.5rem 0; }
.score-summary .score { font-size: 2.4rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.score-summary .tier { font-size: 1rem; opacity: 0.8; margin-top: 0.25rem; }

/* ---------- Certificate: real party template as background, name/date overlaid ---------- */
.certificate-wrap { margin: 1.5rem 0; }
.certificate-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1800 / 1199; /* matches certificate-fr.jpg / certificate-ar.jpg */
  container-type: inline-size;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 18px -12px var(--shadow);
}
.cert-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

.cert-field {
  position: absolute;
  color: #1c3f7a; /* matches the template's ink blue */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  font-size: 3.1cqw;
}

/* Name - on the "M/ Mme ..." / "السيد(ة) / ..." dotted line
   (coordinates measured directly on the source templates, not eyeballed) */
html[lang='fr'] .cert-name { top: 38.3%; left: 38%; width: 48%; text-align: left; }
html[lang='ar'] .cert-name { top: 47.5%; right: 13%; width: 64%; text-align: right; direction: rtl; }

/* Date - on the "Le ..." / "التاريخ : ..." blank (bottom-right in both templates) */
.cert-date { font-size: 15px; font-size: 2.2cqw; unicode-bidi: isolate; }
html[lang='fr'] .cert-date { top: 80.5%; left: 66%; width: 29%; text-align: left; }
html[lang='ar'] .cert-date { top: 80.7%; right: 17%; width: 18%; text-align: right; direction: ltr; }

.cert-code-caption { text-align: center; font-size: 0.78rem; opacity: 0.6; margin: 0.6rem 0 0; }

@media print {
  @page { size: landscape; margin: 8mm; }
  .site-header, .no-print, .score-summary { display: none !important; }
  body { background: #fff; }
  .container { max-width: 100%; padding: 0; }
  .certificate-frame { box-shadow: none; }
  .cert-code-caption { position: fixed; bottom: 2mm; left: 0; right: 0; }
}

/* ---------- Admin ---------- */
.admin-shell { max-width: 980px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; background: var(--brand-dark); color: #fff; }
.admin-header h1 { font-size: 1.1rem; margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 1.25rem; }
.stat-tile { background: var(--card-bg); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; }
.stat-tile .value { font-size: 1.6rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.stat-tile .label { font-size: 0.78rem; opacity: 0.7; }

.table-wrap { margin: 0 1.25rem 2rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card-bg); }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; min-width: 560px; }
th, td { text-align: left; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line); }
thead th { font-size: 0.72rem; text-transform: uppercase; opacity: 0.6; }
.pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; }
.pill.excellent { background: #e6f4ec; color: var(--success); }
.pill.ameliorer { background: #fdf3e0; color: var(--gold); }
.pill.a_reprendre { background: #fdecea; color: var(--danger); }

.admin-login { max-width: 360px; margin: 4rem auto; padding: 2rem; background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px; }
.toolbar { display: flex; gap: 0.75rem; align-items: center; margin: 0 1.25rem 1rem; flex-wrap: wrap; }
.toolbar input[type='text'] { max-width: 240px; }