/* ==========================================================================
   PADC — langues et navigation communes à l'accueil et au portail :
   sélecteur FR · EN · AR, bouton « Retour en haut », textes officiels cités
   en version originale, typographie arabe (sens de lecture de droite à gauche).
   ========================================================================== */

/* --- Sélecteur de langue ----------------------------------------------------- */
.choix-langue {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  padding: 3px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-pilule);
  background: var(--surface);
}
.choix-langue__bouton {
  min-width: 2.75rem;
  min-height: 36px;
  padding: 0 var(--e-2);
  border: 0;
  border-radius: var(--r-pilule);
  background: transparent;
  color: var(--encre-2);
  font: inherit;
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--duree-courte) var(--courbe-standard), color var(--duree-courte) var(--courbe-standard);
}
.choix-langue__bouton:hover { background: var(--vert-50); color: var(--vert-900); }
.choix-langue__bouton[aria-pressed="true"] { background: var(--vert-700); color: #fff; }
.choix-langue__bouton:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* En-tête du portail : le sélecteur suit la navigation (bureau), précède le menu (mobile). */
.entete__interieur > .choix-langue { order: 4; }
@media (max-width: 64rem) {
  .entete__interieur > .marque { order: 1; }
  .entete__interieur > .choix-langue { order: 2; margin-inline-start: auto; }
  .entete__interieur > .bouton-menu { order: 3; }
}
/* Petits écrans : sélecteur compact, bouton « Menu » réduit à son icône (libellé conservé
   pour les lecteurs d'écran) — le logo reste entièrement visible. */
@media (max-width: 36rem) {
  .choix-langue { padding: 2px; }
  .choix-langue__bouton { min-width: 2.15rem; min-height: 34px; padding: 0 4px; }
}
@media (max-width: 30rem) {
  .bouton-menu { padding-inline: var(--e-2); }
  .bouton-menu > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .entete__interieur { gap: var(--e-2); }
}

/* Accueil animé : sélecteur en haut de page, côté début de lecture (la commande de pause
   des animations est de l'autre côté). */
.accueil__langue {
  position: absolute;
  top: max(var(--e-3), env(safe-area-inset-top));
  inset-inline-start: var(--gouttiere);
  z-index: 20;
}
.accueil__langue .choix-langue { box-shadow: var(--ombre-1); }

/* --- Retour en haut ------------------------------------------------------------ */
/* Au-dessus du lanceur de LYA (même côté), sous le panneau quand il est ouvert. */
.retour-haut {
  position: fixed;
  inset-inline-end: calc(max(var(--e-4), env(safe-area-inset-right)) + 12px);
  bottom: calc(max(var(--e-4), env(safe-area-inset-bottom)) + 68px + var(--e-3));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--vert-200);
  border-radius: 50%;
  background: var(--surface);
  color: var(--vert-800);
  box-shadow: var(--ombre-2);
  cursor: pointer;
  animation: retour-haut-apparition var(--duree-moyenne) var(--courbe-sortie);
  transition: transform var(--duree-courte) var(--courbe-standard), background var(--duree-courte) var(--courbe-standard);
}
.retour-haut[hidden] { display: none; }
.retour-haut .icone { width: 22px; height: 22px; }
.retour-haut:hover { background: var(--vert-50); transform: translateY(-2px); }
.retour-haut:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@keyframes retour-haut-apparition {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 40rem) {
  .retour-haut {
    inset-inline-end: calc(max(var(--e-3), env(safe-area-inset-right)) + 7px);
    bottom: calc(max(var(--e-3), env(safe-area-inset-bottom)) + 58px + var(--e-3));
  }
}
@media (prefers-reduced-motion: reduce) {
  .retour-haut { animation: none; transition: none; }
  .retour-haut:hover { transform: none; }
}
.mouvement-reduit .retour-haut { animation: none; transition: none; }
.mouvement-reduit .retour-haut:hover { transform: none; }
@media print { .retour-haut, .choix-langue { display: none !important; } }

/* --- Arabe : flèches et chevrons dans le sens de lecture --------------------- */
[dir="rtl"] .icone--sens { transform: scaleX(-1); }
[dir="rtl"] .lien-fleche:hover .icone--sens { transform: translateX(-3px) scaleX(-1); }

/* --- Arabe : bandeau d'accueil du portail (dégradé du côté du texte) ----------- */
[dir="rtl"] .accueil-heros__visuel::after {
  background: linear-gradient(270deg, #f5f8fb 0%, rgba(245, 248, 251, 0.94) 16%, rgba(245, 248, 251, 0.55) 34%, rgba(245, 248, 251, 0) 56%),
              linear-gradient(0deg, rgba(245, 248, 251, 0.85) 0%, rgba(245, 248, 251, 0) 22%);
}
[dir="rtl"] .accueil-heros__visuel img { object-position: 30% 30%; }

/* --- Textes officiels cités en version originale (hors français) ----------- */
.texte-vo { font-style: normal; }
div.texte-vo { text-align: start; }

/* --- Arabe : polices système qui couvrent l'écriture arabe ---------------------- */
:root[lang="ar"] {
  --police-texte: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Arial", sans-serif;
  --police-titre: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Arial", sans-serif;
  --interligne: 1.75;
}
/* L'espacement des lettres casse la liaison des lettres arabes. */
:root[lang="ar"] body :not(.texte-vo, .texte-vo *) { letter-spacing: normal; }
/* Les lettres arabes n'ont pas de capitales : pas de transformation de casse. */
:root[lang="ar"] body :not(.texte-vo, .texte-vo *) { text-transform: none; }