/*
 * RH-22 — Bouton « Contact » du header (remplace le numéro de téléphone).
 *
 * Le numéro affiché jusqu'ici (`+047 919 2363`) était le texte d'un élément `button`
 * Blocksy stocké en DB (`theme_mods_blocksy-child → header_placements`). Deux constats
 * ont guidé ce fichier :
 *   - le numéro n'était PAS cliquable (`<a href="#">`, aucun `tel:`) → personne ne pouvait
 *     appeler depuis le header ; le remplacer est un gain net, pas un arbitrage ;
 *   - `+047` n'est pas un indicatif valide (Luxembourg = +352) → c'était du contenu de
 *     démo du build nvision, comme les bureaux fictifs de la page Contact.
 *
 * Le remplacement est fait **par code** (filtre `theme_mod_header_placements` dans
 * functions.php), pas au Customizer : une modification en DB ne partirait pas avec le
 * déploiement et serait à rejouer sur chaque environnement (le piège de RH-13).
 *
 * ⚠️ Le bouton CONSERVE la classe `.ct-button` : c'est elle que RH-5 (rh-hover.css) cible
 * pour le balayage diagonal orange. Ne pas la renommer, la micro-interaction tomberait.
 * Ce fichier ne fait donc que gérer l'icône et l'alignement icône/libellé.
 */

:root {
  --rh-cta-icon-size: 17px;   /* icône enveloppe, à hauteur de capitale du libellé */
  --rh-cta-icon-gap: 0.5rem;
}

/* Écart entre l'icône et le libellé. Blocksy met déjà `.ct-button` en
 * `inline-flex; align-items:center; justify-content:center` : on ne redéclare donc que le
 * `gap`, qui lui manque. */
#header .ct-header-cta .ct-button,
.ct-panel .ct-header-cta .ct-button {
  gap: var(--rh-cta-icon-gap);
}

/* Focus clavier du bouton dans l'offcanvas.
 * RH-5 (rh-hover.css) scope son contour rouge à `#header .ct-button`, or le panneau
 * offcanvas vit HORS de #header (cf. rh-sticky.css) : sans cette règle, le bouton Contact
 * du panneau retombait sur le focus natif Blocksy en saumon (palette-color-2), juste
 * au-dessus d'un sélecteur de langue au focus rouge. On aligne les deux. */
.ct-panel .ct-header-cta .ct-button:focus-visible {
  outline: 2px solid var(--theme-palette-color-1);
  outline-offset: 3px;
}

/* L'icône ne se déforme jamais (`flex-shrink: 0`) et ses dimensions sont explicites en
 * CSS *comme* dans l'attribut SVG → aucun reflow au chargement, donc aucun CLS. */
.rh-cta__icon {
  flex: 0 0 auto;
  width: var(--rh-cta-icon-size);
  height: var(--rh-cta-icon-size);
  /* `currentColor` côté markup : l'enveloppe suit la couleur du texte, y compris le
     passage au blanc que RH-5 applique au survol. Rien à re-déclarer ici. */
}

.rh-cta__label {
  line-height: 1;
}

/* 320px : le libellé « Contact » et l'icône tiennent, mais on resserre pour ne pas
 * provoquer de scroll horizontal dans l'offcanvas sur les petits écrans. */
@media (max-width: 360px) {
  :root {
    --rh-cta-icon-gap: 0.35rem;
  }
}