/* =============================================================
   KEMBYELA — styles communs de la gestion de langue (français / arabe)
   Chargé par TOUTES les pages : menu déroulant de langue (globe),
   typographie arabe. Les règles RTL propres à chaque mise en page sont
   dans site.css (pages de contenu) et dans le <style> de index.html
   (application). Utilise les variables de thème des deux feuilles.
   ============================================================= */

/* Un petit script du <head> pose « i18n-pending » quand l'arabe est la langue
   enregistrée : la page reste invisible le temps de charger le dictionnaire
   (évite un éclair de français). i18n.js retire la classe (garde-fou : 4 s). */
html.i18n-pending body{ visibility:hidden; }

/* ---------- Menu de langue : globe + langue courante + liste déroulante ---------- */
.lang-switch{ position:relative; flex:none; }

/* même apparence que les boutons du bandeau (.btn) */
.lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 12px; font-size:12.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--line); background:#f6f7f9; border-radius:8px;
  color:var(--ink); white-space:nowrap;
}
body.dark .lang-btn{ background:#2f363d; }
.lang-btn:hover{ border-color:var(--muted); }
.lang-btn svg{ display:block; flex:none; }
.lang-caret{ width:12px; height:12px; opacity:.7; transition:transform .15s ease; }
.lang-btn[aria-expanded="true"] .lang-caret{ transform:rotate(180deg); }

.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:130;
  margin:0; padding:6px; list-style:none; min-width:150px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.20);
}
.lang-menu[hidden]{ display:none; }
.lang-menu li{ margin:0; padding:0; }
.lang-menu button{
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  width:100%; border:0; background:transparent; cursor:pointer; text-align:start;
  font-size:13.5px; color:var(--ink); padding:9px 11px; border-radius:8px;
}
.lang-menu button:hover,
.lang-menu button:focus-visible{ background:var(--accent-soft); }
.lang-menu button[aria-checked="true"]{ font-weight:700; }
/* drapeaux (SVG intégrés par i18n.js) : dans le bouton et dans chaque entrée du menu */
#langCur{ display:inline-flex; align-items:center; gap:6px; }
.lang-flag{ display:inline-flex; flex:none; line-height:0; }
.lang-flag svg{ display:block; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.lang-menu .ck{ margin-inline-start:auto; padding-inline-start:10px; visibility:hidden; color:var(--accent); font-weight:700; }
.lang-menu button[aria-checked="true"] .ck{ visibility:visible; }

/* le menu s'ouvre du côté de l'écran où se trouve le bouton */
html[dir="rtl"] .lang-menu{ right:auto; left:0; }

@media (max-width:760px){
  .lang-btn{ padding:8px 9px; font-size:11.5px; gap:5px; }
}
@media (max-width:420px){
  .lang-caret{ display:none; }   /* écran très étroit : globe + nom de la langue seulement */
}
@media print{
  .lang-switch{ display:none !important; }
  .lang-loader{ display:none !important; }
}

/* ---------- Écran de chargement (changement de langue) ----------
   Voile flouté plein écran + logo dans une roue qui tourne. Entrée/sortie en fondu (opacité seule,
   le flou suit) ; les durées correspondent aux constantes LOADER_* de i18n.js. */
.lang-loader{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; cursor:progress;
  transition:opacity .4s ease;
}
.lang-loader.dark{ background:rgba(16,19,22,.55); }
.lang-loader.on{ opacity:1; pointer-events:auto; transition-duration:.3s; }

/* retournement de la page (voir i18n.js) : pivot de 0 à 90° (de profil), la langue change, puis de -90° à 0 */
html.lang-flipping{ overflow:hidden; }
body.lang-flip-out{ animation:lang-flip-out .4s cubic-bezier(.5,0,.9,.6) forwards; }
body.lang-flip-in{ animation:lang-flip-in .4s cubic-bezier(.1,.4,.5,1) forwards; }
@keyframes lang-flip-out{
  from{ transform:perspective(1400px) rotateY(0deg); opacity:1; }
  to  { transform:perspective(1400px) rotateY(90deg); opacity:.6; }
}
@keyframes lang-flip-in{
  from{ transform:perspective(1400px) rotateY(-90deg); opacity:.6; }
  to  { transform:perspective(1400px) rotateY(0deg); opacity:1; }
}
.lang-loader-box{
  position:relative; width:108px; height:108px;
  display:flex; align-items:center; justify-content:center;
  transform:scale(.9); transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.lang-loader.on .lang-loader-box{ transform:scale(1); }
.lang-loader-ring{
  position:absolute; inset:0; border-radius:50%;
  border:4px solid rgba(15,118,110,.18); border-top-color:var(--accent,#0f766e);
  animation:lang-spin 1s linear infinite;
}
.lang-loader-logo{
  width:60px; height:60px; object-fit:contain;
  animation:lang-pulse 1.6s ease-in-out infinite;
}
@keyframes lang-spin{ to{ transform:rotate(360deg); } }
@keyframes lang-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.92); opacity:.85; } }
@media (prefers-reduced-motion:reduce){
  .lang-loader, .lang-loader-box{ transition-duration:.01s; }
  .lang-loader-logo{ animation:none; }
  body.lang-flip-out, body.lang-flip-in{ animation:none; }   /* pas de retournement : changement direct */
}

/* ---------- Typographie arabe ----------
   Segoe UI (Windows), SF/Geeza Pro (Apple) et Noto Sans Arabic (Android,
   Linux) contiennent l'arabe : aucune police externe n'est chargée
   (pas de requête vers un tiers). Calibri, elle, n'a pas de glyphes arabes :
   les titres passent sur cette pile en arabe (voir site.css). */
html[lang="ar"] body{
  font-family:"Segoe UI",Tahoma,"Noto Sans Arabic","Geeza Pro","Arial",system-ui,sans-serif;
}
/* saisie libre : dir="auto" (posé par i18n.js) choisit le sens selon ce qui est tapé ;
   on aligne à droite dans une page arabe, y compris quand le champ est vide */
html[dir="rtl"] [data-dir-auto]{ text-align:right; }

/* l'écriture arabe est cursive : ni interlettrage ni capitales */
html[lang="ar"] legend,
html[lang="ar"] .foot-links h2,
html[lang="ar"] .cal-dow span,
html[lang="ar"] .page h1{
  letter-spacing:0;
  text-transform:none;
}