/* ============================================================
   Fauna Morocco — Couche arabe / RTL  (chargée EN DERNIER sur /ar/ uniquement)
   Deux parties :
     A. STRUCTUREL — polices, RTL, positions, hero, nav mobile (mécanique)
     B. CHARTE TYPOGRAPHIQUE — un seul chiffre par rôle, piloté par variables.
   Polices déclarées dans fonts-ar.css (unicode-range → le latin reste Oswald/Lato).
   ============================================================ */

/* ============================================================
   A. STRUCTUREL
   ============================================================ */

/* -- A1. Polices + variables de charte -------------------------------------- */
html[lang="ar"]{
  --font-head:"Noto Kufi Arabic","Oswald","Oswald Fallback",sans-serif;
  --font-body:"Noto Sans Arabic","Lato",Helvetica,Arial,sans-serif;

  /* ---- CHARTE TYPO ARABE — modifie UN chiffre, ça se propage partout ---- */
  --ar-eyebrow:18px;      /* surtitres de section */
  --ar-label:14px;        /* nav, rôles, dates, compteurs, "avec le soutien" */
  --ar-para:19.8px;       /* paragraphes de section — desktop */
  --ar-para-m:14.5px;     /* paragraphes de section — mobile */
  --ar-para-dense:16px;   /* corps DENSE (descriptions de cartes : fiches équipe, partenaires) */
  --ar-cta:15px;          /* liens-CTA (boutons « visite … ») */
  --ar-gap:13px;          /* espace eyebrow → titre */
  --ar-lh-title:1.15;     /* interligne titres */
  --ar-lh-body:1.8;       /* interligne corps desktop */
  --ar-lh-body-m:1.62;    /* interligne corps mobile */
  --ar-lh-label:1.2;      /* interligne labels/surtitres */
}

/* home.css / hero.css / about.css codent des font-family EN DUR (Lato/Oswald) à
   tous les niveaux → on réinjecte Noto. Le latin (noms, scientifiques, @, logo,
   chiffres) retombe seul via l'unicode-range des @font-face arabes. */
html[lang="ar"] body,
html[lang="ar"] .home-page,
html[lang="ar"] .home-phone,
html[lang="ar"] .mh,
html[lang="ar"] .enjeu-nl,
html[lang="ar"] .eyebrow{font-family:var(--font-body)}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] .nh-h1,html[lang="ar"] .nh-lbl .cn,
html[lang="ar"] .mh-h1,html[lang="ar"] .mh-cn{font-family:var(--font-head)}

/* -- A2. Interlettrage : inexistant en arabe, casse les ligatures ----------- */
html[lang="ar"] *{letter-spacing:normal !important}

/* -- A3. Positions PHYSIQUES que dir=rtl ne retourne pas -------------------- */
html[lang="ar"] .skip-link{left:auto;right:8px}
html[lang="ar"] footer .fin .u{margin-left:0;margin-right:auto}                       /* icône + @pseudo latin */
html[lang="ar"] .btn-link:hover>span,
html[lang="ar"] .btn-link:hover .ar{transform:translateX(-4px)} /* flèche vers la gauche */
html[lang="ar"] .encb-head{text-align:right}                    /* bandeau encyclopédie */
html[lang="ar"] .mission .eyebrow{color:var(--ocre)}         /* remplace l'inline style retiré du HTML */
html[lang="ar"] .mem .bd{justify-content:flex-start}            /* cartes équipe : @IG en bas */
html[lang="ar"] .mem a.ig{direction:ltr; margin-top:auto; padding-top:12px}
html[lang="ar"] .bp-cap{align-items:center}                     /* chiffre légende terrain */
html[lang="ar"] .bp-cap .bp-n{transform:translateY(1px)}
html[lang="ar"] .ft-tab{text-align:right;flex-direction:column-reverse} /* onglets final stretch : eyebrow (date) au-dessus du titre — desktop + mobile */
html[lang="ar"] .ft-media .m-cap{inset:0 0 auto 0;flex-direction:column-reverse;text-align:right;background:linear-gradient(180deg,rgba(8,6,4,.78) 0%,rgba(8,6,4,.4) 46%,transparent 100%);padding:13px 18px 28px} /* légende final stretch : haut-droite + nom au-dessus de l’eyebrow (desktop + mobile) */
html[lang="ar"] .ft-media .m-nm{direction:ltr} /* nom latin à gauche (bout de phrase), nom arabe à droite */
html[lang="ar"] .ft-tab::after{transform-origin:right}
html[lang="ar"] .ft-tabs{gap:10px}                              /* écart entre onglets */
html[lang="ar"] .nl .db{padding-left:26px;padding-right:26px}   /* bouton Donate élargi */

/* -- A4. Sélecteur de langue / nav mobile (dropdown ancré à droite) --------- */
@media(max-width:1000px){
  html[lang="ar"] .langm{margin-left:0;margin-right:auto}
  html[lang="ar"] .langm .menu{right:auto;left:0;transform-origin:top left}
  html[lang="ar"] .burger{margin-left:0;margin-right:12px}
  html[lang="ar"] .nl{right:auto;left:0;transform:translateX(-100%)}
  html[lang="ar"] .mtog:checked~.nl{transform:none;box-shadow:24px 0 60px rgba(0,0,0,.55)}
  html[lang="ar"] .nl .langsw{align-self:flex-end}
}

/* -- A5. HERO ACCUEIL — compo photo EN conservée, texte en lecture arabe ---- */
html[lang="ar"] .nhero{direction:ltr;
  --font-head:"Noto Kufi Arabic","Oswald",sans-serif;
  --font-body:"Noto Sans Arabic","Lato",Helvetica,Arial,sans-serif}
html[lang="ar"] .nhero .nh-h1 .ln,
html[lang="ar"] .nhero .nh-sub,
html[lang="ar"] .nhero .nh-lbl .cn{direction:rtl}
html[lang="ar"] .nhero .nh-block{text-align:right}
html[lang="ar"] .nhero .nh-h1 .ln1,
html[lang="ar"] .nhero .nh-h1 .ln2{font-size:clamp(25px,3.333vw,46.67px)}
html[lang="ar"] .nhero .nh-h1{line-height:1.12}
html[lang="ar"] .nhero .nh-row{direction:rtl;align-items:center}
html[lang="ar"] .nhero .nh-sub{text-align:right;font-size:clamp(12.5px,1.5vw,19px);line-height:1.45}

/* -- A5b. HERO desktop — bloc ancré à DROITE + largeur=contenu : le bord gauche
   du bloc (donc du bouton, width:100%) s'aligne sur la ligne 1 la plus longue
   (« …المغرب، »), quelle que soit la largeur de page. Droite figée = position actuelle
   (left:7.5vw + width:clamp(300,40vw,560)). Tailles hero inchangées. -------------- */
@media(min-width:821px){
  html[lang="ar"] .nhero .nh-block{left:auto;right:calc(92.5vw - clamp(300px,40vw,560px));
    width:fit-content;max-width:clamp(300px,40vw,560px)}
}

/* -- A6. HERO MOBILE (#m-root .mh, généré par home-init.js en Oswald/Lato) -- */
@media(max-width:768px){
  html[lang="ar"] #m-root .mh-h1,
  html[lang="ar"] #m-root .mh-cn{font-family:"Noto Kufi Arabic","Oswald",sans-serif}
  html[lang="ar"] #m-root .mh-sub,
  html[lang="ar"] #m-root a.mh-btn{font-family:"Noto Sans Arabic","Lato",sans-serif}
  html[lang="ar"] #m-root .mh-spbar{direction:ltr}
  /* 2026-09-18 : plus de direction:rtl sur .mh-lbl (conteneur flex). En RTL,
     align-items:flex-end bascule du côté GAUCHE, donc le nom arabe ne se collait
     plus à droite comme le latin. Le RTL reste sur .mh-cn, là où il sert. */
  html[lang="ar"] #m-root .mh-lbl{text-align:right}
  html[lang="ar"] #m-root .mh-cn{direction:rtl;text-align:right}
  html[lang="ar"] #m-root .mh-sp{direction:ltr}
  html[lang="ar"] #m-root .mh-cn{font-size:13px}
  html[lang="ar"] #m-root .mh-h1{text-align:right}
  html[lang="ar"] #m-root .mh-h1 .ln1,
  html[lang="ar"] #m-root .mh-h1 .ln2{font-size:calc((100vw - 40px)/12.0)}
  html[lang="ar"] #m-root .mh-sub{text-align:right}
}

/* -- A7. INDEX — bloc encyclopédie en attente (cadre blanc vide) ------------ */
html[lang="ar"] .ar-demo-ph{display:flex;flex-direction:column;height:100%}
html[lang="ar"] .ar-demo-canvas{background:#fff;border:1px solid var(--line);border-radius:var(--btn-radius);
  min-height:440px;flex:1;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.08)}
html[lang="ar"] .ar-demo-soon{font-family:var(--font-head);font-weight:600;color:var(--muted);font-size:var(--fs-t3);opacity:.55}

/* -- A8. Final stretch mobile — onglets inversés + légende en haut ---------- */
@media(max-width:760px){
  html[lang="ar"] .ft-tab{gap:2px}                               /* inversion héritée de la règle de base ; ici juste l'écart resserré mobile */
  html[lang="ar"] .ft-media .m-cap{inset:0 0 auto 0;flex-direction:column-reverse;
    background:linear-gradient(180deg,rgba(8,6,4,.80) 0%,rgba(8,6,4,.42) 46%,transparent 100%);padding:14px 18px 30px}
}

/* ============================================================
   B. CHARTE TYPOGRAPHIQUE — un chiffre par rôle (index + about)
   ============================================================ */

/* -- B1. TITRES : Noto Kufi (déjà), interligne uniforme -------------------- */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] .hv-title,html[lang="ar"] .ft-title,html[lang="ar"] .ft-hl,
html[lang="ar"] .enjeu-ti,html[lang="ar"] .bp-title,html[lang="ar"] .bp-mission,
html[lang="ar"] .encb-title,html[lang="ar"] .ft-tab .t{line-height:var(--ar-lh-title)}

/* -- B2. SURTITRES / eyebrows = --ar-eyebrow ------------------------------- */
html[lang="ar"] .eyebrow,
html[lang="ar"] .ft-eyebrow,
html[lang="ar"] .encb-kicker{font-size:var(--ar-eyebrow);line-height:var(--ar-lh-label)}

/* -- B3. PETITS LABELS = --ar-label (nav, rôles, dates, compteurs, …) ------ */
html[lang="ar"] .nl > a,
html[lang="ar"] .home-team-member-role,
html[lang="ar"] .home-team-m-role,
html[lang="ar"] .mem .role,
html[lang="ar"] .ft-tab .d,
html[lang="ar"] .home-project-progress-label,
html[lang="ar"] .home-project-progress-note,
html[lang="ar"] .home-phone-project-meta,
html[lang="ar"] .home-team-partners-label,
html[lang="ar"] .home-team-m-partners-label{font-size:var(--ar-label);line-height:var(--ar-lh-label)}

/* -- B4. PARAGRAPHES DE SECTION = --ar-para (index + about) ---------------- */
html[lang="ar"] .hv-body,
html[lang="ar"] .home-team-text,
html[lang="ar"] .home-team-m-text,
html[lang="ar"] .ft-desc,
html[lang="ar"] .enjeu-threat,
html[lang="ar"] .enjeu-turn,
html[lang="ar"] .intro p,
html[lang="ar"] .introwrap p,
html[lang="ar"] .mission p{font-size:var(--ar-para);line-height:var(--ar-lh-body)}/* -- B4b. CORPS DENSE (cartes : fiches équipe, descriptions partenaires) --- */html[lang="ar"] .mem p, html[lang="ar"] .pcard p{font-size:var(--ar-para-dense);line-height:1.75}

@media(max-width:768px){
  html[lang="ar"] .hv-body,
  html[lang="ar"] .home-team-text,
  html[lang="ar"] .home-team-m-text,
  html[lang="ar"] .ft-desc,
  html[lang="ar"] .enjeu-threat,
  html[lang="ar"] .enjeu-turn,
  html[lang="ar"] .intro p,
  html[lang="ar"] .introwrap p,
  html[lang="ar"] .mission p{font-size:var(--ar-para-m);line-height:var(--ar-lh-body-m)}html[lang="ar"] .mem p, html[lang="ar"] .pcard p{font-size:14px;line-height:1.6}
}

/* -- B5. ESPACE eyebrow → titre = --ar-gap (uniforme) --------------------- */
html[lang="ar"] .eyebrow,
html[lang="ar"] .ft-eyebrow{display:block;margin-bottom:var(--ar-gap)}
html[lang="ar"] .home-project .hv-title,
html[lang="ar"] .bp-title,
html[lang="ar"] .ft-title,
html[lang="ar"] .mission h2,
html[lang="ar"] .part h2,
html[lang="ar"] .chead h2,
html[lang="ar"] .intro h1,
html[lang="ar"] .introwrap h1{margin-top:0}

/* -- B6. Liens-CTA (« visite Morocco Herpetology », « visite CCC », lien équipe) - */
html[lang="ar"] .btn-link{font-size:var(--ar-cta)}


/* ============================================================
   EXPÉDITIONS (ajout 2026-08-26) — structurel RTL + charte typo.
   Ces sélecteurs .xp-*/.exp-* n'existent que sur expeditions → sans effet ailleurs.
   ============================================================ */

/* -- A9. EXPÉDITIONS — corrections physiques RTL (dir=rtl ne les retourne pas) -- */
html[lang="ar"] .exptop .xbg[aria-hidden="true"]{opacity:0}          /* état initial du crossfade (relocalisé du style= EN) */
html[lang="ar"] .xreports .eyebrow{color:var(--ocre);margin-top:6px} /* surtitre ocre (relocalisé du style= EN) */
html[lang="ar"] .xp-region{font-style:normal}                        /* pas d'italique en arabe */
html[lang="ar"] .xp-next .nx-cta:hover .ar{transform:translateX(-4px)} /* flèche ← vers la gauche */

/* timeline desktop : filet solide + pointillé retournés (positions physiques) */
html[lang="ar"] .exp-tl-line{left:auto;right:0}
html[lang="ar"] .exp-tl-dash{left:9px;right:83.33%}

/* desktop : image de bande à droite, stats bordées à droite, pointillés côté contenu à gauche */
@media(min-width:1181px){
  html[lang="ar"] .xp-media{left:auto;right:0}
  html[lang="ar"] .xp-in{padding:0 366px 0 34px}
  html[lang="ar"] .xp-stats{border-left:0;border-right:1px solid rgba(244,239,230,.14);padding-left:0;padding-right:26px}
  html[lang="ar"] .xp-next::before,
  html[lang="ar"] .xp-next::after{left:0;right:max(0px,calc((100vw - 1200px)/2 + 330px))}
}

/* mobile : timeline verticale — rail + libellés à droite */
@media(max-width:700px){
  html[lang="ar"] .exp-tl-track::before,
  html[lang="ar"] .exp-tl-track::after{left:auto;right:7px}
  html[lang="ar"] .exp-tl-lab,
  html[lang="ar"] .exp-tl-pt:first-child .exp-tl-lab,
  html[lang="ar"] .exp-tl-pt:last-child .exp-tl-lab{text-align:right}
}

/* -- B7. EXPÉDITIONS — charte typo (mêmes rôles → mêmes variables) ----------- */
html[lang="ar"] .exptop .head p{font-size:var(--ar-para);line-height:var(--ar-lh-body)} /* intro hero = corps de section */
html[lang="ar"] .xp-desc{font-size:var(--ar-para-dense);line-height:1.75}               /* desc de bande = corps dense */
html[lang="ar"] .xp-date{font-size:var(--ar-label);line-height:var(--ar-lh-label)}      /* date de bande = petit label */
@media(max-width:768px){
  html[lang="ar"] .exptop .head p{font-size:var(--ar-para-m);line-height:var(--ar-lh-body-m)}
  html[lang="ar"] .xp-desc{font-size:14px;line-height:1.6}
}

/* -- B7b. EXPÉDITIONS — remonter les micro-labels de composants au cran label charte
   (pastilles chiffrées, texte au-dessus de la barre de progression, titre des highlights).
   Demandé par Rayane 2026-08-26 : le chiffre reste, seul le petit texte grossit d'un cran. */
html[lang="ar"] .xp-stat .l,
html[lang="ar"] .xp-hl .hh,
html[lang="ar"] .nx-prog .pl{font-size:var(--ar-label);line-height:var(--ar-lh-label)}
@media(max-width:768px){
  html[lang="ar"] .xp-stat .l{max-width:none}   /* laisse le label 14px respirer dans la pastille */
}

/* -- CONTACT (ajout 2026-08-26) — charte typo + RTL. ⚠ texte AR = ma trad (pas de docx Haytam) → à relire. */
html[lang="ar"] .hero .in p,
html[lang="ar"] .info p{font-size:var(--ar-para);line-height:var(--ar-lh-body)}   /* intro + paragraphe = corps de section */
html[lang="ar"] .info .row a,
html[lang="ar"] .info .row span{font-size:var(--ar-label)}                          /* email / @ / adresse = petit label */
html[lang="ar"] .info .row a{direction:ltr}                                         /* latin (email, @pseudo) en LTR */
html[lang="ar"] .field label{font-size:var(--ar-label);line-height:var(--ar-lh-label)} /* libellés du formulaire */
@media(max-width:768px){
  html[lang="ar"] .hero .in p,
  html[lang="ar"] .info p{font-size:var(--ar-para-m);line-height:var(--ar-lh-body-m)}
}

html[lang="ar"] .hp{left:auto;right:-9999px}   /* honeypot hors-champ côté droit en RTL (sinon overflow horizontal) */

html[lang="ar"] .mem p{font-size:14px}   /* fiches membres : texte un cran plus petit (demande Rayane 2026-08-26), .prow inchangé */

/* ============================================================
   LÉGALES (ajout 2026-08-26) — mentions légales + confidentialité en AR.
   Le corps légal EN est dense (13,5px) : trop petit en arabe → rôle propre
   « corps légal » piloté par --ar-legal. Kufi sur les titres via A1/B1.
   Sélecteurs .legal → sans effet ailleurs.
   ============================================================ */
html[lang="ar"]{
  --ar-legal:15px;       /* corps des pages légales — un cran plus lisible que le 13,5px EN */
  --ar-legal-lh:1.95;    /* interligne corps légal */
}
html[lang="ar"] .legal p,
html[lang="ar"] .legal li{font-size:var(--ar-legal);line-height:var(--ar-legal-lh)}
html[lang="ar"] .legal .updated{font-size:13px;line-height:1.7}
html[lang="ar"] .legal ul{margin:6px 20px 16px 0}   /* liste : retrait à DROITE en RTL (dir ne retourne pas la marge physique) */
html[lang="ar"] .legal h2{letter-spacing:normal}     /* uppercase/letter-spacing latin sans objet en arabe */
html[lang="ar"] .legal a{direction:rtl}              /* liens internes (texte arabe) restent RTL */

/* -- A. Home : labels de stats chiffrées (« نوعًا من الزواحف… ») un poil plus
      grands en arabe : 11.5px -> 13.5px (lisibilité, chiffre inchangé) --------- */
html[lang="ar"] .enjeu-nl{font-size:13.5px}
/* -- Home / section « المرحلة الأخيرة » : labels des stats footer 11px -> 13.5px */
html[lang="ar"] .ft-stat .l{font-size:13.5px}

/* -- Page de don : libelles restes sur Lato/Oswald (audit 2026-09-19) --------
   `donate.css` code la police en dur sur ces quatre composants, donc l'arabe y
   tombait sur la police systeme. Famille Noto + interlettrage neutralise ; les
   tailles, graisses et couleurs de `donate.css` sont conservees. */
html[lang="ar"] .faq .q,
html[lang="ar"] .toggle button,
html[lang="ar"] .nextx .nx-title,
html[lang="ar"] .rhead,
html[lang="ar"] .pxbtn{
  font-family:"Noto Sans Arabic","Lato",Helvetica,Arial,sans-serif;
  letter-spacing:normal;
}