/* Qarar Insight — feuille de style unique.
   Écrite en propriétés logiques (inline-start/end plutôt que left/right) :
   la version arabe en RTL utilise exactement le même fichier. */

/* Palette reprise du logo. Les cinq premières valeurs sont les couleurs
   exactes du kit de marque, relevées dans le SVG :
     #0464a4  bleu principal (la boucle et la flèche)
     #023859  bleu nuit (le mot-symbole, la forme basse)
     #043c5c  bleu nuit secondaire
     #bf9649  or (la barre centrale)
     #a4a4ab  gris (la barre de gauche)

   --accent-text est une déclinaison assombrie de l'or : à 2,7:1 sur blanc,
   l'or de marque ne passe pas le contraste AA pour du texte. On le réserve
   donc aux aplats et bordures, et on écrit avec cette variante à 5,2:1. */
:root {
  --bg: #ffffff;
  --surface: #f4f8fb;
  --surface-2: #e6eef4;
  --ink: #0a1f2e;
  --ink-soft: #4a5c68;
  --line: #d8e3ea;
  --brand: #0464a4;
  --brand-dark: #023859;
  --brand-tint: #e7eff7;
  --accent: #bf9649;
  --accent-text: #8c6520;
  --neutral: #a4a4ab;
  --ok: #1c6f47;

  /* Couleur du texte posé sur un aplat de marque. En thème sombre le bleu
     s'éclaircit, donc le texte doit s'assombrir : d'où la variable. */
  --on-brand: #ffffff;
  --dot: #d3e0ea;                    /* trame de points du hero */
  --glow-a: rgba(4, 100, 164, .14);  /* halo bleu */
  --glow-b: rgba(191, 150, 73, .13); /* halo doré */
  --header-bg: rgba(255, 255, 255, .82);
  --err: #a52318;
  --err-bg: #fdf2f1;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(13, 27, 36, .06), 0 8px 24px rgba(13, 27, 36, .06);
  --wrap: 1120px;
  --wrap-narrow: 720px;
}

html[lang="ar"] {
  --font: "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI",
          Tahoma, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1620;
    --surface: #11212d;
    --surface-2: #182d3b;
    --ink: #e6eef4;
    --ink-soft: #9fb3c0;
    --line: #22394a;
    /* Le bleu de marque à 6,2:1 sur blanc tombe sous 3:1 sur fond sombre :
       on l'éclaircit ici plutôt que d'accepter un texte illisible. */
    --brand: #58a6dd;
    --brand-dark: #8cc7ea;
    --brand-tint: #10293a;
    --accent: #d9af6b;
    --accent-text: #d9af6b;
    --neutral: #8c8c94;
    --ok: #63c295;
    --on-brand: #07202a;
    --dot: #1c3243;
    --glow-a: rgba(88, 166, 221, .17);
    --glow-b: rgba(217, 175, 107, .10);
    --header-bg: rgba(10, 22, 32, .82);
    --err: #f08b80;
    --err-bg: #2b1917;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 3px;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .92em;
  background: var(--surface-2);
  padding: .12em .4em;
  border-radius: 4px;
  unicode-bidi: plaintext;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; inset-inline-start: 0; inset-block-start: -100%;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem;
  z-index: 100; text-decoration: none;
}
.skip:focus { inset-block-start: 0; color: #fff; }

.wrap {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.wrap-narrow { max-inline-size: var(--wrap-narrow); }

/* ---------- En-tête ---------- */

.site-header {
  border-block-end: 1px solid var(--line);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  position: sticky; inset-block-start: 0; z-index: 50;
  transition: box-shadow .25s ease;
}
/* Ombre portée uniquement une fois la page défilée : en haut de page,
   l'en-tête doit se fondre dans le hero, pas flotter au-dessus. */
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(2, 56, 89, .07); }

.header-inner {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap;
  padding-block: .85rem;
}

.logo {
  display: inline-flex; align-items: center;
  margin-inline-end: auto;
  text-decoration: none;
}
/* Le logo est un SVG au ratio 5,47:1. On ne fixe que la hauteur : la largeur
   suit, et l'image reste nette à tout facteur de zoom.
   Pas de miroir en arabe — un logo est une marque déposée, pas un élément
   d'interface : il garde son sens de lecture quelle que soit la langue. */
.logo img {
  display: block;
  block-size: 34px;
  inline-size: auto;
  max-inline-size: 100%;
}
@media (max-width: 480px) {
  .logo img { block-size: 28px; }
}

.site-nav ul, .lang-switch {
  list-style: none; display: flex; gap: 1.4rem;
  margin: 0; padding: 0;
}
.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: .96rem;
  padding-block: .25rem;
  border-block-end: 2px solid transparent;
}
.site-nav a:hover { color: var(--brand); }
.site-nav a[aria-current="page"] {
  color: var(--ink); border-block-end-color: var(--accent-text);
}

.header-side { display: flex; align-items: center; gap: 1.1rem; }

/* Zones tactiles : WCAG 2.2 (AA, critère 2.5.8) demande 24×24 px minimum.
   Les liens de langue faisaient 19×16 et se touchaient presque. On les passe
   en inline-block avec du remplissage : la cible grandit sans que le texte
   change de taille. */
.lang-switch { gap: .15rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.lang-switch a, .lang-switch span {
  display: inline-block;
  min-inline-size: 1.9rem;
  padding: .35rem .3rem;
  text-align: center;
  border-radius: 6px;
}
.lang-switch a { text-decoration: none; color: var(--ink-soft); }
.lang-switch a:hover { color: var(--brand); background: var(--brand-tint); }
.lang-switch [aria-current="true"] { color: var(--ink); font-weight: 650; }

/* Sur petit écran, l'en-tête est collant : chaque rangée coûte de la hauteur
   utile. On le ramène de trois rangées à deux — logo et bouton de paiement en
   haut, navigation et langues en dessous — plutôt que de laisser le logo
   occuper une rangée à lui seul.
   « display: contents » sur .header-side dissout son conteneur pour que le
   bouton et le sélecteur de langue se placent indépendamment. */
@media (max-width: 780px) {
  .header-inner { gap: .55rem .75rem; }
  .logo { order: 1; margin-inline-end: auto; inline-size: auto; }
  .header-side { display: contents; }
  .header-side .btn { order: 2; }
  .site-nav { order: 3; inline-size: auto; margin-inline-end: auto; }
  .site-nav ul { gap: 1.1rem; flex-wrap: wrap; }
  .lang-switch { order: 4; }
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block; position: relative;
  background: var(--brand); color: var(--on-brand);
  padding: .6rem 1.1rem;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  font: inherit; font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(2, 56, 89, .12);
  transition: background .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  background: var(--brand-dark); border-color: var(--brand-dark);
  color: var(--on-brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 56, 89, .18);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(2, 56, 89, .12); }
.btn-sm { padding: .4rem .8rem; font-size: .88rem; }
.btn-lg { padding: .78rem 1.6rem; font-size: 1rem; }
.btn-ghost { background: transparent; color: var(--brand); box-shadow: none; }
.btn-ghost:hover {
  background: var(--brand-tint); color: var(--brand-dark);
  border-color: var(--brand); box-shadow: none;
}
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section-tint { background: var(--surface); }
.section-head { max-inline-size: 46rem; margin-block-end: 2.5rem; }
.section-head h2 { margin-block-end: .4rem; }

.page-head {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem);
  border-block-end: 1px solid var(--line);
  background: var(--surface);
}
.page-head .lead { max-inline-size: 46rem; }

.lead { font-size: 1.13rem; color: var(--ink-soft); }
.note { font-size: .92rem; color: var(--ink-soft); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .09em;
  font-size: .78rem; font-weight: 650; color: var(--accent-text);
  margin-block-end: .8rem;
}

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-block-end: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

/* Trois couches : deux halos colorés, puis une trame de points qui s'efface
   vers le bas. Le tout en CSS — aucune image à télécharger. */
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 72% at 76% 26%, var(--glow-a), transparent 68%),
    radial-gradient(48% 58% at 10% 88%, var(--glow-b), transparent 70%),
    var(--bg);
}
[dir="rtl"] .hero-bg {
  background:
    radial-gradient(58% 72% at 24% 26%, var(--glow-a), transparent 68%),
    radial-gradient(48% 58% at 90% 88%, var(--glow-b), transparent 70%),
    var(--bg);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 85%);
  opacity: .6;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.hero-text { max-inline-size: 34rem; }
.hero h1 { margin-block-end: .45em; }
.hero .lead { font-size: 1.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2rem; }

.hero-visual { inline-size: 100%; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-text { max-inline-size: none; }
  .hero-visual { max-inline-size: 24rem; margin-inline: auto; }
}

/* ---------- Grilles ---------- */

.grid { display: grid; gap: 1.5rem; }
/* Seuil calé pour donner 2 colonnes — donc un 2×2 pour les quatre domaines.
   À 19rem, auto-fit en produisait 3 et laissait la quatrième carte orpheline.

   Le « min(…, 100%) » n'est pas décoratif : minmax(23rem, 1fr) impose une
   largeur PLANCHER de 23rem que la piste ne peut jamais franchir vers le bas.
   Sur un écran de 320px, la carte gardait donc 368px et débordait la page.
   min(23rem, 100%) autorise la piste à se réduire à la largeur du conteneur. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

.card {
  position: relative; overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Filet dégradé qui se déploie au survol, du bleu vers l'or de marque. */
.card::before {
  content: ""; position: absolute;
  inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
[dir="rtl"] .card::before { transform-origin: right; }
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--brand-tint);
}
.card:hover::before { transform: scaleX(1); }
.card h3 { color: var(--brand-dark); }
.card p { color: var(--ink-soft); margin: 0; }

.stat { padding-inline-start: 0; }
.stat-value { font-size: 1.2rem; font-weight: 650; margin-block: .9rem .3rem; }
.stat-label { color: var(--ink-soft); margin: 0; font-size: .97rem; }

.cta-band {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem;
  background: linear-gradient(135deg, #023859 0%, #0464a4 100%);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  color: #eaf3f6;
}
/* Halo doré discret dans l'angle, pour éviter l'aplat de bleu plat. */
.cta-band::before {
  content: ""; position: absolute;
  inset-block-start: -40%; inset-inline-end: -10%;
  inline-size: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(191, 150, 73, .30), transparent 65%);
  pointer-events: none;
}
.cta-band-text, .cta-band-action { position: relative; }
.cta-band h2 { color: #fff; margin-block-end: .35em; }
.cta-band p { margin: 0; max-inline-size: 38rem; }
.cta-band .btn { background: var(--accent); border-color: var(--accent); color: #22150a; }
.cta-band .btn:hover { background: #a2661f; border-color: #a2661f; color: #fff; }

/* ---------- Offres ---------- */

.offer-grid { align-items: start; }

.offer {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex; flex-direction: column; block-size: 100%;
}
.offer-featured {
  border-color: var(--brand);
  box-shadow: var(--shadow);
}
.offer-badge {
  display: inline-block; align-self: flex-start;
  background: var(--accent); color: #22150a;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .2rem .6rem; border-radius: 100px;
  margin-block-end: .9rem;
}
.offer h2 { font-size: 1.25rem; margin-block-end: .3rem; }
.offer-price {
  font-size: 2rem; font-weight: 680; color: var(--brand-dark);
  letter-spacing: -.02em; margin-block-end: .1rem;
}
.offer-duration {
  font-size: .88rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
  margin-block-end: 1rem;
}
.offer-tagline { color: var(--ink-soft); }
.offer-includes {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin-block: 1.2rem .6rem;
}
.offer-action { margin-block-start: auto; padding-block-start: 1.4rem; }
.offer-action .btn { inline-size: 100%; text-align: center; }

.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li {
  position: relative;
  padding-inline-start: 1.6rem;
  margin-block-end: .55rem;
  color: var(--ink-soft);
}
/* La coche est dessinée avec deux bords de longueurs inégales : à branches
   égales on obtient un chevron, pas une coche.
   Bords physiques et non logiques, volontairement : une coche est un symbole,
   elle ne doit pas s'inverser en arabe comme le ferait une flèche. Seul son
   positionnement suit le sens de lecture. */
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: .18rem;
  inset-block-start: .42em;
  inline-size: .34rem;
  block-size: .62rem;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
}

.faq details {
  border-block-end: 1px solid var(--line);
  padding-block: 1rem;
}
.faq summary {
  cursor: pointer; font-weight: 600; list-style-position: inside;
}
.faq summary::marker { color: var(--brand); }
.faq details p { margin-block: .75rem 0; color: var(--ink-soft); }

/* ---------- Méthode ---------- */

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li {
  display: flex; gap: 1.25rem;
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--line);
}
.steps li:first-child { border-block-start: none; padding-block-start: 0; }
.step-num {
  flex: none;
  inline-size: 2.25rem; block-size: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-dark);
  font-weight: 700; font-size: .95rem;
}
.steps h3 { margin-block-end: .35rem; }
.steps p { color: var(--ink-soft); margin: 0; }

/* ---------- Contact ---------- */

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-block-end: 2.5rem;
}
.contact-list { margin: 0 0 1.5rem; }
.contact-list dt {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin-block-start: .9rem;
}
.contact-list dt:first-child { margin-block-start: 0; }
.contact-list dd { margin: .15rem 0 0; font-size: 1.05rem; }
/* Principal moyen de contact : la cible doit atteindre le seuil tactile. */
.contact-list dd a { display: inline-block; padding-block: .25rem; }

/* ---------- Prose (pages légales) ---------- */

.prose h2 { margin-block: 2.2rem .6rem; font-size: 1.25rem; }
.prose h2:first-child { margin-block-start: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-inline-start: 1.3rem; }
.prose li { margin-block-end: .4rem; }
.callout {
  background: var(--brand-tint);
  border-inline-start: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
}

/* ---------- Formulaire de paiement ---------- */

.pay-form { margin-block-end: 1rem; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 0 0 1.5rem;
  background: var(--bg);
}
.panel legend {
  font-weight: 650; font-size: 1.05rem;
  padding-inline: .5rem;
  margin-inline-start: -.5rem;
}

.mode-switch { border: none; padding: 0; margin: 0 0 1.5rem; }
.mode-options {
  display: flex; gap: .5rem; flex-wrap: wrap;
  background: var(--surface-2);
  padding: .3rem; border-radius: var(--radius);
}
.mode-option { flex: 1 1 12rem; }
.mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.mode-option span {
  display: block; text-align: center;
  padding: .6rem 1rem;
  border-radius: calc(var(--radius) - 3px);
  cursor: pointer; font-weight: 600; font-size: .95rem;
  color: var(--ink-soft);
}
.mode-option input:checked + span {
  background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 3px rgba(13, 27, 36, .12);
}
.mode-option input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 2px; }

.field { margin-block-end: 1.25rem; }
.field:last-child { margin-block-end: 0; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-block-end: .35rem; }
.field .req { color: var(--ink-soft); font-weight: 400; font-size: .85rem; }
.field .opt { color: var(--ink-soft); font-weight: 400; font-size: .85rem; }
.field-help { font-size: .88rem; color: var(--ink-soft); margin: .35rem 0 0; }
.panel > .field-help { margin-block: .25rem 1.25rem; }

input[type="text"], input[type="email"], input[type="number"] {
  inline-size: 100%;
  font: inherit; font-size: 1rem;
  padding: .65rem .8rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus { border-color: var(--brand); }

/* Un champ quantité pleine largeur suggérerait qu'on y saisit une phrase. */
.field-quantity { margin-block-start: 1.5rem; }
.field-quantity input { inline-size: 6.5rem; }

select {
  inline-size: 100%;
  font: inherit; font-size: 1rem;
  padding: .65rem .8rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
select:focus { border-color: var(--brand); }

/* Code postal et ville sur une ligne : ils se lisent ensemble.
   Grille explicite plutôt que flex. Les libellés n'ont pas la même longueur
   d'une langue à l'autre, et « Code postal (obligatoire) » passe sur deux
   lignes dans une colonne étroite : en flex, cela décalerait son champ par
   rapport à celui de la ville. Ici les libellés partagent la première rangée
   et les champs la seconde, donc ils s'alignent quoi qu'il arrive. */
.field-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(11rem, 2fr);
  column-gap: 1rem;
  margin-block-end: 1.25rem;
}
.field-row .field { display: contents; }
.field-row .field > label { grid-row: 1; align-self: end; }
.field-row .field > input { grid-row: 2; }
.field-postcode > * { grid-column: 1; }
.field-city > * { grid-column: 2; }

/* Sur petit écran on abandonne la grille et on empile.
   On rend leur display normal aux deux champs plutôt que de replacer chaque
   élément dans la grille : des règles de placement plus spécifiques que
   celles ci-dessus seraient nécessaires, et une media query n'ajoute aucune
   spécificité — l'empilement franc est plus sûr. */
@media (max-width: 420px) {
  .field-row { display: block; }
  .field-row .field { display: block; margin-block-end: 1.25rem; }
  .field-row .field:last-child { margin-block-end: 0; }
}
input[aria-invalid="true"] { border-color: var(--err); }

.input-affix { position: relative; display: block; }
.input-affix input { padding-inline-end: 2.5rem; }
.affix {
  position: absolute;
  inset-inline-end: .85rem; inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft); font-weight: 600;
}

.offer-choices { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.offer-choice {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  cursor: pointer;
  font-weight: 400;
}
.offer-choice:hover { border-color: var(--brand); background: var(--brand-tint); }
.offer-choice input { flex: none; accent-color: var(--brand); inline-size: 1.1rem; block-size: 1.1rem; }
.offer-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.offer-choice:has(input:focus-visible) { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.offer-choice-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.offer-choice-name { font-weight: 600; }
.offer-choice-meta { font-size: .86rem; color: var(--ink-soft); }
.offer-choice-price { font-weight: 680; color: var(--brand-dark); white-space: nowrap; }

.field-check label {
  display: flex; align-items: flex-start; gap: .65rem;
  font-weight: 400; font-size: .96rem;
}
.field-check input { flex: none; margin-block-start: .3rem; accent-color: var(--brand); inline-size: 1.05rem; block-size: 1.05rem; }

.pay-summary {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-block-start: 1.5rem;
}
.pay-total { display: flex; flex-direction: column; margin: 0; }
.pay-total-label {
  font-size: .85rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft);
}
.pay-total strong { font-size: 1.6rem; letter-spacing: -.02em; color: var(--brand-dark); }
.pay-detail { font-size: .9rem; color: var(--ink-soft); }
.btn-pay { min-inline-size: 12rem; }

.cards-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .87rem; color: var(--ink-soft);
  margin-block-start: 1rem;
}
.card-chip {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .1rem .5rem;
  background: var(--surface);
}

.alert {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-block-end: 1.5rem;
  border: 1px solid;
}
.alert-error { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.alert strong { display: block; margin-block-end: .2rem; }

.bank-details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-block: 1.5rem;
}
.bank-details dt {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin-block-start: 1rem;
}
.bank-details dt:first-child { margin-block-start: 0; }
.bank-details dd { margin: .2rem 0 0; font-size: 1.02rem; }
/* Un IBAN se lit et se recopie chiffre par chiffre. Trois exigences :
   il reste en LTR même en arabe, il ne se coupe jamais en fin de ligne, et il
   tient sur une seule ligne. C'est cette dernière qui contraint tout le reste :
   « TN59 2501 2000 0001 5531 0822 » fait 29 caractères, d'où l'absence
   d'interlettrage et le partage asymétrique des colonnes plus bas. */
.bank-details code {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  font-size: .88em;
  max-inline-size: 100%;
  overflow-x: auto;   /* filet de sécurité : défiler plutôt que déborder */
}

/* Le bloc international porte l'IBAN, le plus long des deux : il prend la
   part la plus large. Le RIB tient largement dans le reste. */
.bank-accounts {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
}
.bank-account h3 {
  font-size: .95rem; color: var(--brand-dark);
  margin-block-end: 0;
}
.bank-account .bank-details { margin-block: .75rem; padding: 1.25rem; }

/* Seuil calé sur la largeur maximale du conteneur (--wrap-narrow, 720px) et
   non sur une valeur ronde : en dessous, les deux colonnes ne laissaient plus
   que ~13px de marge autour de l'IBAN. Une seule colonne rend cette marge
   confortable, et le nowrap ci-dessus garantit le reste. */
@media (max-width: 740px) {
  .bank-accounts { grid-template-columns: 1fr; }
  .bank-account .bank-details { padding: 1.1rem; }
}

/* Sur les écrans les plus étroits (≈320px), l'IBAN occupait la largeur
   disponible au pixel près. On resserre le cadre et le corps du texte : les
   métriques de police varient d'un appareil à l'autre, et une marge nulle
   finirait par basculer en défilement horizontal chez quelqu'un. */
@media (max-width: 400px) {
  .bank-account .bank-details { padding: .85rem; }
  .bank-details code { font-size: .8em; }
}

/* ---------- Résultat de paiement ---------- */

.result-icon {
  inline-size: 3.25rem; block-size: 3.25rem;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 1.8rem; line-height: 1;
  margin-block-end: 1.25rem;
}
.result-ok { background: var(--brand-tint); color: var(--ok); }
.result-ko { background: var(--err-bg); color: var(--err); }

.reference {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-block-end: 2rem;
}
.reference-label {
  display: block; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft);
}
.reference strong { font-size: 1.15rem; unicode-bidi: plaintext; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Pied de page ---------- */

.site-footer {
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  padding-block: 3rem 1.5rem;
  margin-block-start: 2rem;
  font-size: .95rem;
}
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  padding-block-end: 2rem;
}
.footer-name { font-weight: 680; font-size: 1.05rem; }
.footer-brand p { color: var(--ink-soft); margin-block-start: .4rem; }
.site-footer h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin-block-end: .8rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-block-end: .45rem; }
.site-footer a {
  color: var(--ink); text-decoration: none;
  /* inline-block + remplissage : la cible atteint 26px sans changer le rendu. */
  display: inline-block;
  padding-block: .2rem;
}
.site-footer a:hover { color: var(--brand); text-decoration: underline; }

.footer-base {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  border-block-start: 1px solid var(--line);
  padding-block-start: 1.5rem;
  color: var(--ink-soft); font-size: .87rem;
}
.footer-base p { margin: 0; }

@media print {
  .site-header, .site-footer, .hero-actions, .pay-form { display: none; }
}

/* ==========================================================================
   Identité visuelle
   Ajouts destinés à donner du caractère au site sans rien charger d'externe :
   la politique de sécurité de contenu interdit toute ressource tierce, donc
   tout ce qui suit est du CSS et du SVG écrits à la main.
   ========================================================================== */

/* ---------- Icônes ---------- */

.icon {
  inline-size: 100%; block-size: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Seules les icônes porteuses d'une direction s'inversent en arabe. Une
   flèche, oui ; une boussole ou un graphique, non — ils deviendraient faux. */
[dir="rtl"] .icon[data-flip] { transform: scaleX(-1); }

.card-icon, .stat-icon {
  display: inline-grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 13px;
  background: var(--brand-tint);
  color: var(--brand);
  margin-block-end: 1rem;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.card-icon .icon, .stat-icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.card:hover .card-icon { transform: translateY(-2px) rotate(-3deg); }

.stat-icon {
  margin-block-end: 0;
  background: transparent;
  color: var(--accent-text);
  border: 1px solid var(--line);
}

/* ---------- Sur-titre ---------- */

.eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow-dot {
  inline-size: .45rem; block-size: .45rem;
  border-radius: 50%; background: var(--accent);
  flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow-b); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ---------- Illustration du hero ---------- */

.flowchart { inline-size: 100%; block-size: auto; display: block; overflow: visible; }

.flow-stop-a { stop-color: var(--brand); stop-opacity: .12; }
.flow-stop-b { stop-color: var(--brand); stop-opacity: .8; }
.glow-stop-a { stop-color: var(--brand); stop-opacity: .22; }
.glow-stop-b { stop-color: var(--brand); stop-opacity: 0; }

.flowchart .ring { fill: none; stroke: var(--line); stroke-width: 1; }
.flowchart .ring-1 { opacity: .9; }
.flowchart .ring-2 { opacity: .55; }

/* Le pointillé qui défile suggère la circulation de la donnée. Chaque chemin
   a sa propre durée : synchronisés, ils feraient mécanique. */
.flowchart .flow {
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 4 10;
  animation: flow-move 3.6s linear infinite;
}
.flowchart .flow:nth-child(2) { animation-duration: 4.4s; }
.flowchart .flow:nth-child(3) { animation-duration: 3.1s; }
.flowchart .flow:nth-child(4) { animation-duration: 4.9s; }
.flowchart .flow:nth-child(5) { animation-duration: 4.0s; }
@keyframes flow-move { to { stroke-dashoffset: -42; } }

.flowchart .src { fill: var(--neutral); opacity: .55; }
.flowchart .src:nth-child(odd) { animation: blink 3.2s ease-in-out infinite; }
.flowchart .src:nth-child(even) { animation: blink 4.1s ease-in-out infinite .6s; }
@keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

/* Les trois barres reprennent celles du logo, dans leurs couleurs exactes. */
.flowchart .bar-a { fill: var(--neutral); opacity: .75; }
.flowchart .bar-b { fill: var(--accent); }
.flowchart .bar-c { fill: var(--brand); }
.flowchart .bar { animation: grow 5s ease-in-out infinite; transform-origin: bottom; }
.flowchart .bar-b { animation-delay: .25s; }
.flowchart .bar-c { animation-delay: .5s; }
@keyframes grow { 0%, 100% { transform: scaleY(.88); } 50% { transform: scaleY(1); } }

.flowchart .node-glow { fill: url(#nodeGlow); animation: halo 4s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.flowchart .node { fill: var(--brand); }
.flowchart .node-check {
  stroke: var(--on-brand);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Apparition au défilement ---------- */

/* Ces règles ne s'appliquent qu'aux éléments que le script a explicitement
   armés. Sans JavaScript, ou si le script échoue, rien n'est masqué : le
   contenu reste lisible. C'est la raison de la classe intermédiaire. */
.reveal.is-armed {
  opacity: 0;
  transform: translateY(16px);
}
.reveal.is-armed.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
/* Décalage en cascade à l'intérieur d'une même grille. */
.grid .reveal.is-armed:nth-child(2).is-visible { transition-delay: .07s; }
.grid .reveal.is-armed:nth-child(3).is-visible { transition-delay: .14s; }
.grid .reveal.is-armed:nth-child(4).is-visible { transition-delay: .21s; }

/* ---------- Liseré de section ---------- */

.band-top { position: relative; }
.band-top::before {
  content: ""; position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--brand) 25%, var(--accent) 75%, transparent);
  opacity: .5;
}

/* ---------- Offre mise en avant ---------- */

.offer-featured {
  background: linear-gradient(170deg, var(--brand-tint) 0%, var(--bg) 45%);
}
.offer { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.offer:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); }

/* ---------- Mouvement réduit ----------
   Respect strict de la préférence système : on coupe toute animation plutôt
   que de la ralentir. Les états finaux restent ceux du contenu visible. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.is-armed { opacity: 1; transform: none; }
  .card:hover, .offer:hover, .btn:hover { transform: none; }
}

/* ---------- Illustration en lecture arabe ----------
   Le dessin raconte « des données éparses vers une décision ». En arabe, l'œil
   va de droite à gauche : sans miroir, il rencontrerait la décision avant les
   données, et le récit s'inverserait. On mire donc l'ensemble… */
[dir="rtl"] .flowchart { transform: scaleX(-1); }
/* …sauf la coche, qui est un symbole et non une direction : mirée, elle
   deviendrait une coche à l'envers. */
[dir="rtl"] .flowchart .node-check {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}