/*
 * RH-20 — Sélecteur de langue FR/EN dans le header. Child theme versionné.
 *
 * Pourquoi custom et pas natif : l'élément `language-switcher` de Blocksy est fourni par
 * **Blocksy Companion**, qui n'est pas installé ici. Il est bien *placé* dans
 * `header_placements` (vestige du build nvision) mais `panel-builder/header/` ne contient
 * aucun renderer pour lui → il ne rend rien. Même schéma que le sticky de RH-2.
 * Le custom versionné voyage par la CI : zéro config DB à rejouer par environnement.
 *
 * Rendu par le shortcode [rh_lang_switcher], injecté dans un élément `text` de Blocksy
 * (le seul renderer natif qui passe son contenu par do_shortcode).
 *
 * Zéro JS : ce sont deux liens. Fonctionne intégralement sans JavaScript.
 *
 * Trois états, et c'est le cœur de la story :
 *   1. langue active       → <span aria-current="true">  : graisse + soulignement
 *   2. langue disponible   → <a href>                    : cliquable
 *   3. langue sans équivalent → <span aria-disabled="true"> : en retrait, non cliquable
 *
 * L'état 3 est majoritaire aujourd'hui (l'accueil n'a pas de version EN). Sans lui, le
 * lien EN mènerait à /en/ qui affiche « No results » — un listing de blog vide avec le
 * menu en français. Pire qu'un 404 pour le visiteur. Il s'éteindra tout seul au fil de
 * RH-21 : l'état est calculé par page, à l'exécution, sans retoucher ce fichier.
 *
 * ⚠️ L'état 3 ne s'applique JAMAIS au français : le site FR est complet, donc l'entrée FR
 * reste toujours cliquable (vers l'accueil à défaut de page équivalente). Sinon le visiteur
 * serait enfermé sur le site anglais. Cf. functions.php, « REPLI DE LA LANGUE PAR DÉFAUT ».
 *
 * ⚠️ Ne PAS utiliser la classe `.ct-button` ici : RH-5 (rh-hover.css) applique un balayage
 * diagonal orange à `#header .ct-button`. Le sélecteur de langue n'est pas un CTA.
 */

:root {
  --rh-lang-gap: 0.55rem;          /* écart de part et d'autre du séparateur */
  /* Durée volontairement PLUS COURTE que --rh-sticky-dur (0.32s) : celle du shrink est
     calibrée pour un mouvement de barre, elle serait perçue comme un retard sur un survol
     de lien. Le gabarit MOTION de la story plafonne le hover à 0,2s. L'easing, lui, est
     bien repris du header pour rester cohérent. */
  --rh-lang-dur: 0.18s;
  --rh-lang-ease: var(--rh-sticky-ease, ease);
  --rh-lang-size: 12px;            /* aligné sur la police du header (Montserrat 12) */
}

/* Neutralise l'habillage de l'élément `text` de Blocksy (entry-content ajoute des marges
 * de flux verticales dont on ne veut pas dans une barre horizontale). */
.ct-header-text:has(.rh-lang),
.ct-header-text:has(.rh-lang) .entry-content {
  margin: 0;
  padding: 0;
}

.rh-lang {
  display: flex;
  align-items: center;
  gap: var(--rh-lang-gap);
  font-family: inherit;
  font-size: var(--rh-lang-size);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;      /* « FR | EN » ne se coupe jamais en deux lignes */
}

/* Le séparateur est décoratif : généré en CSS, donc jamais lu par un lecteur d'écran
 * (un « | » dans le markup serait annoncé comme du contenu). */
.rh-lang__item + .rh-lang__item::before {
  content: "|";
  margin-right: var(--rh-lang-gap);
  color: var(--theme-palette-color-3);
  opacity: 0.35;
}

.rh-lang__item {
  display: inline-flex;
  align-items: center;
}

/* Texte réservé aux lecteurs d'écran : porte l'explication du repli « pas de traduction ».
 * Le `title` seul ne suffit pas — il n'est pas exposé de façon fiable par les lecteurs
 * d'écran, et pas du tout au clavier. */
.rh-lang__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- État 2 : langue disponible ---
 * Le soulignement de l'état actif est réservé à la langue affichée (état 1), qui n'est pas
 * cliquable. Pour que le lien ne soit pas moins « cliquable » à l'œil que le texte statique
 * d'à côté, il porte un soulignement TRANSPARENT au repos, qui se révèle au survol et au
 * focus : la place est réservée, donc rien ne bouge, et l'affordance apparaît à l'interaction. */
.rh-lang__link {
  color: var(--theme-palette-color-3);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  /* Cible de clic de 24px de haut (plancher usuel) obtenue par un padding SYMÉTRIQUE, et
   * surtout pas par `min-height` : le lien est un élément flex (son parent `.rh-lang__item`
   * est en `inline-flex`), donc une `min-height` étire la boîte vers le bas en laissant le
   * texte collé en haut — le « EN » apparaissait alors décalé vers le haut par rapport à
   * « FR », mais seulement lorsqu'il était cliquable. Avec du padding, le texte reste au
   * centre de sa boîte et les deux entrées s'alignent. 12px de texte + 2×6px = 24px. */
  padding: 6px 3px;
  transition: color var(--rh-lang-dur) var(--rh-lang-ease),
              text-decoration-color var(--rh-lang-dur) var(--rh-lang-ease);
}
.rh-lang__link:hover,
.rh-lang__link:focus-visible {
  color: var(--theme-palette-color-1);   /* rouge de charte #F54E16 */
  text-decoration-color: currentColor;
}

/* Focus clavier net — même traitement que RH-5 pour rester cohérent. */
.rh-lang__link:focus-visible {
  outline: 2px solid var(--theme-palette-color-1);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- État 1 : langue active ---
 * Identifiée par la GRAISSE + le SOULIGNEMENT, pas par la seule couleur : le critère
 * d'acceptance l'exige, et c'est le seul repère qui survit à un daltonisme comme à une
 * impression en noir et blanc. */
.rh-lang__current {
  color: var(--theme-palette-color-3);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--theme-palette-color-1);
  cursor: default;
}

/* --- État 3 : langue sans traduction ---
 * En retrait et non cliquable. `cursor: not-allowed` + `aria-disabled` côté markup.
 * Pas de `pointer-events: none` : cela empêcherait l'infobulle native du `title`
 * d'apparaître, alors que c'est elle qui explique pourquoi le lien est éteint. */
.rh-lang__disabled {
  color: var(--theme-palette-color-3);
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: none;
}

/* --- Header à l'état compacté (RH-2) ---
 * AUCUNE règle ici, et c'est volontaire : le critère d'acceptance demande que le sélecteur
 * ne saute pas et ne disparaisse pas au shrink. On ne touche donc ni sa taille, ni son
 * affichage, sous `html.rh-sticky-shrunk`. Noté pour que personne n'ajoute un scale() en
 * croyant « finir » le shrink. */

/* --- Dans l'offcanvas mobile ---
 * Le panneau est hors #header (cf. rh-sticky.css). Le sélecteur y est plus grand et
 * détaché du menu : en mobile c'est une action à part entière, pas un ornement de barre. */
.ct-panel .rh-lang {
  font-size: 14px;
  gap: 0.7rem;
  margin-top: 1.25rem;
}
.ct-panel .rh-lang__item + .rh-lang__item::before {
  margin-right: 0.7rem;
}
/* Cibles tactiles du panneau : le sélecteur y est manipulé au doigt. On vise le plancher
 * de 44px de haut recommandé pour le tactile — atteint par `min-height` plutôt que par du
 * padding, pour ne pas écarter les deux entrées du séparateur. */
.ct-panel .rh-lang__link,
.ct-panel .rh-lang__current,
.ct-panel .rh-lang__disabled {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

/*
 * prefers-reduced-motion : aucune transition. Les états de couleur, de graisse et de
 * soulignement restent intacts — seul le mouvement est coupé (même doctrine que RH-5).
 */
@media (prefers-reduced-motion: reduce) {
  .rh-lang__link {
    transition: none !important;
  }
}