/* ==========================================================================
   Icon Font
   Généré via IcoMoon (https://icomoon.io/app) ou Fontello (https://fontello.com).
   Sélectionner les icônes nécessaires, exporter en woff2,
   et placer le fichier dans assets/fonts/icons/

   Pour ajouter de nouvelles icônes :
   1. Ré-importer le fichier selection.json dans IcoMoon
   2. Ajouter les icônes souhaitées
   3. Re-télécharger et remplacer le fichier .woff2
   4. Ajouter la classe .icon-xxx ci-dessous avec le bon content
   ========================================================================== */

@font-face {
	font-family: 'charleneobaton-icons';
	src: url('../fonts/icons/charleneobaton-icons.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/* Base icon — éléments génériques (hors boutons) */
[class^="icon-"]:not(.wp-block-button)::before,
[class*=" icon-"]:not(.wp-block-button)::before {
	font-family: 'charleneobaton-icons';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	speak: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Icon Map — À compléter avec les codes Unicode de ton subset IcoMoon.
   ========================================================================== */

.icon-calendar:not(.wp-block-button)::before,
.wp-block-button.icon-calendar .wp-block-button__link::before,
.wp-block-button.icon-calendar.icon-after .wp-block-button__link::after {
	content: "\e900";
}

.icon-arrow-right:not(.wp-block-button)::before,
.wp-block-button.icon-arrow-right .wp-block-button__link::before,
.wp-block-button.icon-arrow-right.icon-after .wp-block-button__link::after {
	content: "\e901";
}

.icon-phone:not(.wp-block-button)::before,
.wp-block-button.icon-phone .wp-block-button__link::before,
.wp-block-button.icon-phone.icon-after .wp-block-button__link::after {
	content: "\e902";
}

.icon-location:not(.wp-block-button)::before,
.wp-block-button.icon-location .wp-block-button__link::before,
.wp-block-button.icon-location.icon-after .wp-block-button__link::after {
	content: "\e903";
}

.icon-clock:not(.wp-block-button)::before,
.wp-block-button.icon-clock .wp-block-button__link::before,
.wp-block-button.icon-clock.icon-after .wp-block-button__link::after {
	content: "\e904";
}

.icon-checked:not(.wp-block-button)::before,
.wp-block-button.icon-checked .wp-block-button__link::before,
.wp-block-button.icon-checked.icon-after .wp-block-button__link::after {
	content: "\e905";
}



/* ==========================================================================
   Icone + texte — alignement vertical automatique (flex)
   Usage : class="icon-calendar icon-text" (+ option icon-badge)
   ========================================================================== */

.icon-text[class^="icon-"],
.icon-text[class*=" icon-"]{
  display: flex;
  align-items: center;      /* <-- centre l'icône sur toute la hauteur du bloc */
  gap: 0.75em;              /* espace icône <-> texte */
}

/* l'icône (le content vient de tes règles .icon-xxx::before existantes) */
.icon-text[class^="icon-"]::before,
.icon-text[class*=" icon-"]::before{
  flex: 0 0 auto;
  width: auto;
  height: auto;

  display: inline-grid;
  place-items: center;

  font-family: 'charleneobaton-icons';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-size: 1.25em;
  color: var(--wp--preset--color--primary);

  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Option : badge (fond derrière l’icône) */
.icon-text.icon-badge[class^="icon-"]::before,
.icon-text.icon-badge[class*=" icon-"]::before{
  border-radius: 999px;
  background: var(--icon-badge-bg, color-mix(in srgb, var(--wp--preset--color--green-light) 35%, transparent));
}

/* Variante si tu préfères aligner l'icône sur la 1ère ligne plutôt que centrer le bloc */
.icon-text.icon-vtop{
  align-items: flex-start;
}