/*!
 * Composants de la maquette validée, sites UPS in Space et OJBT.
 *
 * Ce fichier est volontairement court. Tout ce qu'une option d'élément d'Avada sait
 * exprimer, taille, couleur, casse, interlettrage, marge, fond de conteneur, est
 * réglé dans l'élément lui-même, donc modifiable au clic sans ouvrir un fichier.
 * Ne restent ici que les cas qu'aucune option ne couvre.
 *
 * WHY ne pas tout mettre en CSS : mesuré sur le rendu, la feuille compilée d'Avada
 * l'emporte en spécificité sur une classe posée dans le champ « Classe CSS ». Il
 * faudrait écrire « !important » partout, ce qui interdirait ensuite toute retouche
 * depuis l'interface. Porté par l'élément, le réglage gagne sans forcer.
 *
 * WHY le préfixe « ojbt- » : « wrap », « grid » et « tag » existent déjà dans le
 * HTML servi, et Avada définit « btn » et « card ».
 *
 * WHY aucun filet d'un pixel : ces traits se lisent comme des bordures de tableau,
 * disparaissent sur un écran peu contrasté et hachent la page. Là où une séparation
 * est nécessaire, c'est un aplat teinté qui la porte.
 */

/* -- Fond du pied de page ---------------------------------------------------
   WHY une variable propre et non un jeton du thème : le pied suit la bascule
   clair/sombre comme le reste de la page, mais reste un cran plus soutenu que le
   contenu pour se distinguer sans trait de séparation. Aucun des douze jetons ne
   décrit ce rôle : custom_color_3 s'éclaircit en mode sombre, alors qu'il faut ici
   l'inverse. */
:root {
  --ojbt-fond-pied: #e2e6ed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ojbt-fond-pied: #070c15;
  }
}
:root[data-theme="dark"] {
  --ojbt-fond-pied: #070c15;
}

/* -- Définition de l'association --------------------------------------------
   WHY sans fond : quatre aplats de la même teinte sur une seule page se lisaient
   comme un damier plutôt que comme une hiérarchie. Le paragraphe se détache
   désormais par sa largeur de lecture et son espacement, et la teinte est réservée
   au cadre du site, en-tête et pied. */
.ojbt-definition {
  max-width: 68ch;
  padding-left: 0;
}

/* -- Mesure de lecture de l'accroche ----------------------------------------
   WHY une largeur maximale : au-delà d'environ soixante-quinze caractères, l'œil
   perd la ligne suivante en revenant à la marge. */
.ojbt-accroche {
  max-width: 68ch;
}

/* -- Bandeau de chiffres ----------------------------------------------------
   WHY sans fond : même raison. Les quatre chiffres se distinguent par leur taille
   et par l'espacement entre colonnes, sans avoir besoin d'un aplat. */

/* -- Zone cliquable du choix de langue --------------------------------------
   WHY une règle : le drapeau mesure 30 pixels de large, ce qui laisse une cible
   plus étroite que les 44 pixels que demande le critère 2.5.8 des WCAG au doigt. */
.lang-item > .awb-menu__main-a {
  min-width: 44px;
  justify-content: center;
}

/* -- Survol du choix de langue ----------------------------------------------
   WHY un anneau et non un changement de couleur : ses deux voisines dans le menu,
   l'enveloppe et le sélecteur de thème, signalent le survol en passant au bleu
   foncé de la charte. Un drapeau est une image, sa couleur ne peut pas changer
   sans le dénaturer. L'anneau reprend donc le même jeton, si bien que les trois
   icônes réagissent de la même façon et dans la même couleur.

   WHY ce jeton précisément : il suit la bascule clair/sombre de lui-même, et il
   est mesuré à 7,79:1 sur l'en-tête clair et 7,32:1 sur l'en-tête sombre. */
.lang-item > .awb-menu__main-a img {
  border-radius: 3px;
  transition: box-shadow 0.15s ease;
}

.lang-item > .awb-menu__main-a:hover img,
.lang-item > .awb-menu__main-a:focus-visible img {
  box-shadow: 0 0 0 2px var(--awb-custom_color_2);
}

@media (prefers-reduced-motion: reduce) {
  .lang-item > .awb-menu__main-a img {
    transition: none;
  }
}

/* -- Icône Linktree ---------------------------------------------------------
   WHY un filtre : le fichier fourni est un dessin blanc, pensé pour un pied sombre.
   Le pied suivant désormais le thème, ce blanc disparaît en mode clair. L'inversion
   le rend sombre sur fond clair, et le laisse blanc sur fond sombre.

   WHY sur l'image et non sur le lien : les cinq autres icônes sont des caractères de
   police, leur couleur se règle dans l'élément. Seule celle-ci est une image. */
.fusion-social-network-icon img {
  filter: invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fusion-social-network-icon img {
    filter: none;
  }
}
:root[data-theme="dark"] .fusion-social-network-icon img {
  filter: none;
}


/* -- Agenda : les deux couleurs qu'Avada ne rattache pas ---------------------
   WHY cette exception au principe « tout se règle dans Avada » : l'extension
   d'agenda déclare ses propres variables, et Avada en rattache la plupart à la
   palette du thème. Deux échappent au rattachement et restent écrites en dur dans la
   feuille de l'extension, « --tec-color-text-primary: #141827 » et
   « --tec-color-text-secondary: #5d5d5d ». En mode sombre, la première vaut presque
   exactement le fond de la page : mesuré 1,01:1, la navigation d'un événement à
   l'autre devenait invisible.

   WHY les rattacher plutôt que corriger chaque élément : ces deux variables servent
   à des dizaines de textes de l'agenda. Les rattacher une fois couvre aussi ceux
   qu'une mise à jour de l'extension ajoutera. */
.tribe-events,
.tribe-events-single,
.single-tribe_events,
.tribe-common {
  --tec-color-text-primary: var(--awb-color7);
  --tec-color-text-secondary: var(--awb-custom_color_1);
}

/* -- Groupe des trois icônes de fin de menu ----------------------------------
   WHY une règle : les trois icônes se collaient à la dernière entrée en toutes
   lettres, laissant un vide de près de trois cents pixels avant le bouton. Elles
   doivent se poser au milieu de cet espace, et une marge automatique de chaque
   côté du groupe est la seule façon de partager le vide à parts égales, quel que
   soit le nombre d'entrées du menu. Aucun réglage d'Avada ne le fait : son menu
   ne sait justifier que la ligne entière, pas un groupe en son sein.

   WHY une classe posée dans WordPress : la première icône se repère par la classe
   « ojbt-icones », saisie dans le champ « Classes CSS » de l'entrée Contact, à
   l'écran des menus. Elle reste donc visible et modifiable sans toucher au code, et
   déplacer le groupe revient à déplacer cette classe sur une autre entrée. */
.ojbt-entete .awb-menu__main-ul > .ojbt-icones {
  margin-left: auto;
}

.ojbt-entete .awb-menu__main-ul > .ojbt-item-theme {
  margin-right: auto;
}

/* -- Taille des icônes du menu ----------------------------------------------
   WHY cette règle alors que le réglage existe dans Avada : le champ « Taille des
   icônes » de l'élément Menu écrit bien sa valeur dans la page, mesuré, sous la
   forme d'une variable posée sur le menu. Mais aucune de ses feuilles ne s'en sert
   pour une entrée réduite à son icône : le glyphe suit alors la typographie du
   menu et le réglage reste sans effet, sans que rien ne le signale.

   La règle ne fixe donc aucune taille : elle branche la variable qu'Avada émet
   déjà. Le champ de l'interface redevient la commande, et il n'y a toujours qu'un
   seul endroit où régler la chose. */
.ojbt-entete .awb-menu__i_main {
  font-size: var(--awb-icons-size, 1em);
}

/* -- Bouton de l'en-tête, largeur incompressible -----------------------------
   WHY cette règle : le menu et le bouton partagent une colonne, et la disposition
   souple sert le menu en premier. Le bouton reçoit ce qui reste, et quand ce reste
   passait sous les 156 pixels que demande son libellé, celui-ci se coupait en deux
   lignes : le bouton montait à 62 pixels de haut et paraissait mal aligné, sans
   qu'aucun réglage n'ait changé.

   Interdire la coupure suffit à le protéger : un mot qui ne peut pas passer à la
   ligne fixe la largeur minimale de son bouton, que la disposition doit alors
   respecter. Avada n'expose ni largeur minimale ni résistance au rétrécissement,
   vérifié dans les paramètres de son élément Bouton. */
.ojbt-entete .fusion-button {
  white-space: nowrap;
}