/* ═══════════════════════════════════════════════════════════════════════
   DRAHMI — SYSTÈME TYPOGRAPHIQUE
   Source unique pour toutes les pages. Chargé APRÈS le <style> inline de
   chaque page : les tailles inline encore présentes sont du poids mort à
   retirer page par page, elles ne décident plus rien.

   Pourquoi deux familles maintenant. Gabarito seule portait tout le site,
   et la mesure le disait : 35 couples taille/graisse peints sur l'accueil,
   dont 12,48px / 12,8px / 13,12px — 0,32px d'écart, aucun rôle distinct.
   Deux défauts mesurés en plus :
     · font-weight: 300 était déclaré deux fois alors que l'axe wght de
       Gabarito s'arrête à 400. Rendu identique à 400, au chiffre près
       (1522,203px dans les deux cas). La légèreté n'existait pas.
     · les chiffres de Gabarito sont proportionnels : « 111 » mesure
       208px là où « 000 » mesure 324px. Sur un site dont l'argument est
       une comparaison de montants, aucune colonne ne s'alignait.

   Répartition :
     · GABARITO (400–900) — display, titres, marque. La voix.
     · IBM PLEX SANS (300–700) — texte courant, libellés, ET TOUS LES
       CHIFFRES. Ses chiffres avancent tous de 600/1000, à chaque graisse
       de l'axe : les montants s'alignent sans réglage.
     · ARABE — pile système. Ni Gabarito ni Plex ne contiennent un seul
       caractère arabe (cmap Gabarito : 478 glyphes, 0 en U+0600–06FF),
       donc l'arabe tombait dans une police de dernier recours non
       choisie. PRODUCT.md : accents arabes décoratifs uniquement.

   Les métriques de repli sont calculées, pas devinées : x-height / em
   mesurée dans chaque fichier (Gabarito 0,488 · Plex 0,516 · Arial
   0,5186), size-adjust = rapport des deux, ascent et descent redivisés
   par ce rapport. Le texte ne bouge donc pas au moment du swap.

   Sur le préfixe :root des affectations (§5). Les feuilles inline
   utilisent des sélecteurs descendants — .final-cta p, .article-content
   h2, .stat-card .number — qui pèsent 0,1,1. Une règle à une seule
   classe pèse 0,1,0 et perd, quel que soit l'ordre de chargement :
   l'ordre ne tranche qu'à spécificité égale. :root ajoute exactement un
   cran de classe (0,2,0) et rend l'affectation décisive sans !important.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. FONTES
   ───────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Gabarito';
  src: url('../fonts/Gabarito-Variable.woff2') format('woff2');
  font-weight: 400 900;   /* l'axe s'arrête à 400 : ne rien demander en dessous */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Replis métriquement accordés. Sans eux, `swap` fait sauter la page :
   Gabarito a une x-height de 0,488 contre 0,5186 pour Arial, donc le
   texte de repli est visiblement plus gros que la vraie fonte.

   Gabarito ne compose plus que du display. Pour un titre, ce qui se voit
   au moment du swap n'est pas la hauteur d'x, c'est l'endroit où la ligne
   se casse — donc on accorde la CHASSE, pas la hauteur d'x. Le calcul par
   hauteur d'x donnait 94,1% et laissait −1,70% de largeur sur un titre de
   72px ; 95,7% ramène l'écart à −0,04%, hauteur inchangée. Mesuré, pas
   déduit : 94,1 → −1,70% · 95,0 → −0,75% · 95,5 → −0,23% · 96,0 → +0,28%. */
@font-face {
  font-family: 'Gabarito Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 95.7%;
  ascent-override: 98.2%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}

/* Même méthode pour le texte : accordé à la chasse sur une phrase
   française réelle (accents compris), pas sur la hauteur d'x seule.
   99,5 → −0,87% · 100,0 → −0,34% · 100,5 → +0,13% ; 100,4% tombe à 0. */
@font-face {
  font-family: 'Plex Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 100.4%;
  ascent-override: 102.1%;
  descent-override: 27.4%;
  line-gap-override: 0%;
}

/* ─────────────────────────────────────────────────────────────────────
   2. JETONS
   ───────────────────────────────────────────────────────────────────── */

:root {
  --font-display: 'Gabarito', 'Gabarito Fallback', sans-serif;
  --font-text: 'IBM Plex Sans', 'Plex Fallback', sans-serif;
  /* Naskh d'abord : c'est la forme attendue pour du texte arabe court.
     Aucune fonte arabe n'est auto-hébergée — usage décoratif seulement. */
  --font-arabic: 'Geeza Pro', 'Noto Naskh Arabic', 'Al Bayan', 'Segoe UI',
                 'Tahoma', sans-serif;

  /* Échelle. Ancrée sur un corps de 17px ; chaque cran s'écarte du
     précédent d'au moins 8%, la plupart de 13% ou plus, pour qu'aucun
     couple ne se dispute le même rôle. En rem : le zoom et la taille de
     police système continuent de fonctionner. */
  --t-display:    clamp(2.75rem, 6vw, 4.5rem);      /* 44 → 72px */
  --t-title:      clamp(1.875rem, 4vw, 2.625rem);   /* 30 → 42px */
  --t-heading:    1.625rem;                          /* 26px */
  --t-card-title: 1.25rem;                           /* 20px */
  --t-quote:      clamp(1.375rem, 2.6vw, 1.875rem);  /* 22 → 30px */
  --t-lead:       1.1875rem;                         /* 19px */
  --t-body:       1.0625rem;                         /* 17px */
  --t-small:      0.9375rem;                         /* 15px */
  --t-meta:       0.8125rem;                         /* 13px */

  /* Chiffres — toujours Plex.
     figure-xl est calé pour que « 1 EUR = 152,19 DZD » tienne sur UNE
     ligne : le conteneur de la page taux fait 680px, la chaîne mesure
     863px à 96px et 647px à 72px. À 96px elle cassait après le « = »,
     ce qui coupait le chiffre en deux — le nombre le plus important du
     site lu en deux morceaux. */
  --t-figure-xl:  clamp(3.25rem, 8.5vw, 4.5rem);     /* 52 → 72px */
  --t-figure-lg:  clamp(2rem, 5vw, 2.75rem);         /* 32 → 44px */
  --t-figure-md:  2rem;                              /* 32px */

  /* Interlignes accordés au corps et à la largeur, pas un ratio unique.
     Plus la ligne est longue, plus elle a besoin d'air. */
  --lh-display: 1.02;
  --lh-title:   1.1;
  --lh-heading: 1.2;
  --lh-quote:   1.45;
  --lh-lead:    1.6;
  --lh-body:    1.65;
  --lh-small:   1.6;
  --lh-meta:    1.5;
  --lh-arabic:  1.85;   /* l'arabe empile des diacritiques : il lui faut plus */

  /* Approche. Plancher à -0,04em, jamais franchi : au-delà les lettres
     se touchent. Elle se resserre quand le corps grandit, pas l'inverse. */
  --tr-display: -0.035em;
  --tr-title:   -0.025em;
  --tr-heading: -0.015em;
  --tr-logo:    -0.02em;    /* la marque était à -0,04em pour 24px : trop */
  --tr-figure:  -0.02em;
  --tr-kicker:  0.09em;

  /* Mesures. 45–75 caractères : au-delà, l'œil perd la ligne au retour. */
  --measure:       68ch;
  --measure-lead:  48ch;
  --measure-tight: 58ch;
  --measure-quote: 42ch;
}

/* ─────────────────────────────────────────────────────────────────────
   3. BASE
   ───────────────────────────────────────────────────────────────────── */

:root body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  /* Le rendu par défaut de macOS graisse le texte clair sur fond sable ;
     antialiased rend la graisse 400 telle qu'elle est dessinée. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `pretty` empêche le mot orphelin en fin de paragraphe. */
p, li, dd, blockquote { text-wrap: pretty; }

/* Le paragraphe par défaut. Pèse 0,1,1 : tous les rôles nommés du §5
   (0,2,0 et plus) passent devant. Cela ne sert qu'à reprendre les pages
   courtes qui codaient encore `p { font-size: 17px }` en dur. */
:root p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

/* ─────────────────────────────────────────────────────────────────────
   4. RÔLES — classes utilitaires pour tout nouveau balisage
   ───────────────────────────────────────────────────────────────────── */

:root .t-display, :root .t-title, :root .t-heading, :root .t-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;   /* équilibre les lignes au lieu de laisser un orphelin */
}

:root .t-display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

:root .t-title {
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
}

:root .t-heading {
  font-size: var(--t-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
}

:root .t-card-title {
  font-size: var(--t-card-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

:root .t-lead {
  font-family: var(--font-text);
  font-size: var(--t-lead);
  font-weight: 300;   /* une vraie légèreté : l'axe de Plex descend à 300 */
  line-height: var(--lh-lead);
  max-width: var(--measure-lead);
}

:root .t-body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  max-width: var(--measure);
}

:root .t-small {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: var(--lh-small);
  max-width: var(--measure-tight);
}

:root .t-meta {
  font-family: var(--font-text);
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: var(--lh-meta);
}

/* Une seule grammaire de sur-titre pour tout le site. */
:root .t-kicker {
  font-family: var(--font-text);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
}

:root .t-quote {
  font-family: var(--font-text);
  font-size: var(--t-quote);
  font-weight: 400;
  line-height: var(--lh-quote);
  letter-spacing: -0.005em;
  max-width: var(--measure-quote);
}

/* ─── Chiffres ───
   Règle du site : tout chiffre est composé en IBM Plex Sans. Ses chiffres
   avancent tous de 600/1000 unités, vérifié à wght 300/400/500/700, donc
   les colonnes s'alignent d'elles-mêmes. `tabular-nums` est conservé en
   garde-fou : le sous-ensemble Google ne porte pas la fonctionnalité tnum
   (les largeurs sont déjà égales), mais la déclaration protège l'intention
   si la fonte est un jour remplacée. */
:root .t-figure, :root .t-figure-xl, :root .t-figure-lg, :root .t-figure-md {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
}

:root .t-figure-xl {
  font-size: var(--t-figure-xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tr-figure);
}

:root .t-figure-lg {
  font-size: var(--t-figure-lg);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--tr-figure);
}

:root .t-figure-md {
  font-size: var(--t-figure-md);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tr-figure);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. AFFECTATION DES RÔLES AUX SÉLECTEURS EXISTANTS
   Du plus large au plus précis : à spécificité égale, c'est la dernière
   règle qui tranche, donc l'intention la plus fine vient en dernier.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 5a. Conteneurs de texte long ─── */

:root .article-content {
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

:root .article-content p,
:root .article-content li,
:root .lede,
:root .truth-body {
  max-width: var(--measure);
}

/* Chapeaux sans classe propre : ciblés par leur position exacte plutôt
   que par `.hero p`, qui attrapait aussi le paragraphe arabe. */
:root .hero > .container > p,
:root .final-cta > p {
  font-family: var(--font-text);
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: var(--lh-lead);
  max-width: var(--measure);
}

/* ─── 5b. Marque et navigation ─── */

:root .logo,
:root .brand,
:root .brand-mark,
:root footer .footer-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;             /* 22px, cohérent avec la page taux */
  letter-spacing: var(--tr-logo);
  line-height: 1.1;
}

:root .nav-links a,
:root .nav-links a.nav-cta,
:root .nav-link,
:root .nav-cta,
:root .footer-links a,
:root .article-back {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: normal;
}

/* ─── 5c. Display et titres ─── */

/* h1.hero-title, pas .hero-title seul : le titre EST un h1 dans .hero, il
   tombait donc sous le groupe titres et sortait en 42px au lieu de 72px. */
:root h1.hero-title,
:root .hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

:root .section-title,
:root .truth-title,
:root .app-showcase h2,
:root .features h2,
:root .comparison h2,
:root .ph-special-card h2,
:root .blog-header h1,
:root .article-header h1,
/* producthunt : h1 sans classe. Ciblé par son chemin exact plutôt que
   par `.hero h1`, qui reprenait aussi le display de l'accueil et le taux
   de la page taux. */
:root .hero > .container > h1,
:root h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  text-wrap: balance;
}

:root .article-content h2,
:root .blog-card h2,
:root h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}

:root .article-content h3,
:root .feature-card h3,
:root .step h3,
:root .article-cta h3,
:root .related-articles h2,
:root .related-link strong,
:root .cta-title,
:root .referral-title,
:root .ph-badge-title,
:root .summary-box .summary-title {
  font-family: var(--font-display);
  font-size: var(--t-card-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ─── 5d. Sur-titres : une seule grammaire ─── */

:root .section-tag,
:root .stat-label,
:root .blog-card-tag,
:root .article-tag,
:root .related-link span,
:root .ph-special-badge,
:root .ph-badge-label,
:root .brand-sub,
:root .hero-eyebrow,
:root .comparison-table th {
  font-family: var(--font-text);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
}

/* La pastille d'état porte une phrase — « Bientôt disponible en France &
   Algérie », 43 caractères — pas une étiquette. Elle reste donc hors du
   groupe sur-titres : les capitales sur une phrase suppriment la forme des
   mots, qui est ce à quoi on reconnaît un mot. Le poids et la couleur
   suffisent à la détacher. */
:root .hero-badge {
  font-family: var(--font-text);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

/* ─── 5e. Chapeaux et corps nommés ─── */

:root .hero-sub,
:root .section-lede,
:root .blog-header p,
:root .lede,
:root .app-showcase .showcase-subtitle,
:root .truth-body,
:root .cta-lede,
:root .hero-meta {
  font-family: var(--font-text);
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: var(--lh-lead);
}

:root .hero-sub { max-width: var(--measure-lead); }

:root .feature-card p,
:root .step p,
:root .article-cta p,
:root .blog-card p,
:root .referral-desc,
:root .ph-special-card p,
:root .stat-card .label,
:root .cta-more-intro,
:root .author-info .role,
:root .compare-note,
:root .transfer-pill,
:root .comparison-table,
:root .comparison-table td,
:root .comp-cell,
:root .ph-banner,
:root footer {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: var(--lh-small);
}

/* ─── 5f. Citations ─── */

:root blockquote,
:root .testimonial-card .quote {
  font-family: var(--font-text);
  font-size: var(--t-quote);
  font-weight: 400;
  line-height: var(--lh-quote);
  letter-spacing: -0.005em;
}

/* ─── 5g. Formulaires ─── */

:root .input-row input,
:root .waitlist-form input,
:root .cta-input {
  font-family: var(--font-text);
  font-size: var(--t-body);        /* ≥16px : évite le zoom automatique iOS */
  font-weight: 400;
}

:root .btn-primary,
:root .waitlist-form button,
:root .cta-button,
:root .btn,
:root .referral-btn,
:root .article-cta .btn-primary {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.005em;
}

:root .field-label,
:root .radio-row label,
:root .cta-more summary,
:root .lang-name,
:root .cta-lang-pill,
:root .perk,
:root .author-info .name,
:root .waitlist-form .form-error,
:root .form-message,
:root .cta-success {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 500;
}

/* ─── 5h. Mentions, légendes, métadonnées ───
   Qualifié par l'élément (p.form-note = 0,2,1) pour passer devant les
   chapeaux de conteneur de 5a, qui pèsent le même 0,2,1 mais visent plus
   large : `.final-cta > p` attrapait la mention du formulaire. */

:root p.form-note,
:root p.showcase-note,
:root p.truth-fineprint,
:root .form-consent,
:root .cta-consent,
:root .cta-fineprint,
:root .field-hint,
:root .hero-source,
:root .compare-disclaimer,
:root .pill-time,
:root .quote-author,
:root .article-meta,
:root .blog-card-meta,
:root .phone-label,
:root .footer-note,
:root footer p,
:root .updated,
:root .fineprint {
  font-family: var(--font-text);
  font-size: var(--t-meta);
  font-weight: 400;
  line-height: var(--lh-meta);
  letter-spacing: normal;
  max-width: var(--measure);       /* .truth-fineprint mesurait 127 caractères */
}

/* ─── 5i. Chiffres ─── */

:root .stat-num,
:root .truth-math-amount,
:root .stat-card .number {
  font-family: var(--font-text);
  font-size: var(--t-figure-lg);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--tr-figure);
  font-variant-numeric: tabular-nums;
}

/* Qualifié par l'élément : sur la page taux le taux EST le h1, donc il
   tombait sous `:root .hero h1` (0,2,1) du groupe titres et sortait en
   42px Gabarito. h1.hero-rate pèse le même 0,2,1 et arrive plus tard. */
:root h1.hero-rate,
:root .hero-rate {
  font-family: var(--font-text);
  font-size: var(--t-figure-xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tr-figure);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;   /* si l'écran force le retour, qu'il soit équilibré */
}

:root .hero-rate-unit {
  font-family: var(--font-text);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 400;
}

/* Le taux du jour est un chiffre avant d'être une phrase. */
:root .hero-rate-line {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
:root .hero-rate-line strong,
:root .hero-rate-line .rate-cta { font-weight: 600; }

/* Le tableau comparatif est l'argument du site : ses montants doivent
   s'aligner au chiffre près, colonne par colonne. */
:root .compare-amount,
:root .compare-name {
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

:root .comparison-table td,
:root .comp-cell,
:root .truth-math-rate,
:root .hero-meta {
  font-variant-numeric: tabular-nums;
}

:root .truth-math-context,
:root .truth-math-rate {
  font-family: var(--font-text);
  font-size: var(--t-meta);
  font-weight: 500;
}

/* L'ordinal des étapes : une suite, donc un chiffre, donc Plex. */
:root .step-num {
  font-family: var(--font-text);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tr-figure);   /* -0,05em franchissait le plancher */
  font-variant-numeric: tabular-nums;
}

/* ─── 5j. Arabe — en dernier, pour que rien ne le reprenne ───
   Piloté par l'attribut : le balisage porte déjà lang="ar", et c'est lui
   qui doit décider de la fonte. Approche remise à normal — l'arabe est
   une écriture liée, on ne l'espace pas. */

:root [lang="ar"],
:root [lang^="ar-"],
:root .hero-arabic {
  font-family: var(--font-arabic);
  font-weight: 400;
  line-height: var(--lh-arabic);
  letter-spacing: normal;
  font-feature-settings: normal;
}

:root .hero-arabic {
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);   /* 18 → 24px */
}

/* Filigrane arabe du CTA final : composé dans une police sans un seul
   glyphe arabe et espacé à -0,05em. L'espacement s'avère inerte en rendu
   (largeur identique, mesurée), mais la famille n'était pas choisie. */
:root .final-cta::before {
  font-family: var(--font-arabic);
  letter-spacing: normal;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. PETITS ÉCRANS
   Le trafic de ce corridor est massivement Android mobile. Le corps ne
   descend pas : seuls les crans display se resserrent.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {
  :root {
    --t-display:    clamp(2.25rem, 9vw, 3rem);       /* 36 → 48px */
    --t-title:      clamp(1.625rem, 6.5vw, 2rem);    /* 26 → 32px */
    --t-heading:    1.375rem;                        /* 22px */
    --t-card-title: 1.1875rem;                       /* 19px */
    --t-quote:      1.3125rem;                       /* 21px */
    --t-figure-xl:  clamp(2.75rem, 13vw, 3.5rem);    /* 44 → 56px */
    --t-figure-lg:  1.75rem;                         /* 28px */
    /* Corps, small et meta inchangés — 17 / 15 / 13px restent lisibles. */

    /* La mesure en ch se resserre d'elle-même, mais c'est la largeur du
       conteneur qui commande sur mobile : on relâche pour ne pas brider. */
    --measure:       none;
    --measure-lead:  none;
    --measure-tight: none;
    --measure-quote: none;
  }

  :root .hero-arabic { font-size: 1.125rem; }
  :root .step-num { font-size: 2.75rem; }
}

/* Respecte le réglage de taille de police du système : tout est en rem,
   rien n'est verrouillé en px, et aucune règle ne coupe le zoom. */