/* ---------------------------------------------
   FC TOUCHES « jpv » — la vitrine Etch/ACSS de Jouer pour Vivre portée sur le portail FluentCommunity
   ---------------------------------------------
   Chargé EN DERNIER par le mu-plugin (constante FC_ACSS_TOUCHES), après automatic-variables, preset,
   socle et acss-fc-font-family : ses règles gagnent à spécificité égale, et ses !important (nécessaires
   contre ceux d'acss-fc-font-family.css) ont une spécificité supérieure.
   Contrat : zéro couleur en dur (var(--…) ACSS, color-mix permis) ; aucun jeton ACSS redéclaré (les
   jetons locaux sont préfixés --jpv-) ; sélecteurs portés par les classes de FluentCommunity 2.12.0.
   Mode sombre non traité (désactivé dans FC).
   DA (CR call Stéphanie 03/07) : titres en CAPITALES, fond crème, aplats vifs par touches, violet en
   parcimonie, boutons pilule. Polices de la vitrine : Fredoka (titres), Nunito (texte, via
   --text-font-family), Gochi Hand (accent) — chargées par Google Fonts (FC_ACSS_FONTS_URL du mu-plugin),
   comme la vitrine le fait par @import.
--------------------------------------------- */

/* Jetons locaux du portail : familles de la vitrine (hors ACSS), ombre douce des cartes, crème « section alternée » */
.fluent_com {
  --jpv-font-titres: 'Fredoka', system-ui, sans-serif;
  --jpv-font-accent: 'Gochi Hand', cursive;
  --jpv-ombre-carte: 0 2px 14px color-mix(in srgb, var(--black) 6%, transparent);
  --jpv-fond-alt: color-mix(in oklch, var(--base-ultra-light), var(--secondary) 6%);
}

/* Variables FC que le socle ne mappe pas (lien bleu WordPress, texte éteint, surlignage, cartes) : ramenées aux jetons JPV */
.fluent_com {
  --fcom-text-link: var(--primary-dark);
  --fcom-text-off: var(--text-dark-muted);
  --fcom-secondary-border: var(--border-color-dark);
  --fcom-secondary-content-bg: var(--base-ultra-light);
  --fcom-highlight-bg: var(--secondary-ultra-light);
  --fcom-card-bg: var(--white);
  --fcom-hover-bg: var(--ours-color-bg-muted);
  --fcom-active-border: var(--secondary);
  --fcom-primary-button-bg: var(--secondary);
}

/* Fond crème de la vitrine sur toute la page du portail ; les cartes blanches se détachent dessus */
.fluent_com,
.fluent_com .fluent_com_portal,
.fluent_com .fcom_wp_content {
  background: var(--base-ultra-light);
}

/* Le fond de la page entière : FC pose ses couleurs sur body par un style en ligne (lightSkins, secondary_bg gris clair) ; html body (0,0,2) l'emporte (jpv-27, recette du 27/10) */
html body {
  --fcom-secondary-bg: var(--base-ultra-light);
  background-color: var(--base-ultra-light);
}

/* Titres en Fredoka (acss-fc-font-family les met en var(--heading-font-family), absente chez JPV) */
.fcom_wrap h1, .fcom_wrap h2, .fcom_wrap h3, .fcom_wrap h4, .fcom_wrap h5, .fcom_wrap h6,
.fcom_wrap :is(h1, h2, h3, h4, h5, h6) *,
.fcom_wrap .fcom_space_page_title {
  font-family: var(--jpv-font-titres) !important;
  font-weight: 700;
  line-height: 1.14;
  text-wrap: balance;
}

/* h1/h2 et titres de page : CAPITALES et violet, comme .jpv-h1 / .jpv-sec-head__titre — c'est là que vit le violet, nulle part en aplat */
.fcom_wrap h1, .fcom_wrap h2, .fcom_wrap .fcom_space_page_title {
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--tertiary);
}

/* Titres de groupes de la barre latérale et des listes : le « surtitre » de la vitrine (petites capitales espacées, turquoise foncé) */
.fcom_wrap .fcom_space_group_header,
.fcom_wrap .fcom_mapped_list__group_title {
  font-family: var(--jpv-font-titres) !important;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-dark);
}

/* Barre latérale et menu haut : crème un ton plus chaud ; item actif/survolé en turquoise foncé sur crème orangé (sans aplat) */
.fluent_com .fcom_top_menu,
.fluent_com .spaces {
  --fcom-primary-bg: var(--jpv-fond-alt);
  --fcom-menu-text-active: var(--primary-dark);
  --fcom-menu-text-hover: var(--primary-dark);
  --fcom-active-bg: color-mix(in oklch, var(--base-ultra-light), var(--secondary) 16%);
  --fcom-menu-bg-hover: color-mix(in oklch, var(--base-ultra-light), var(--secondary) 10%);
}

/* FC pose l'item actif des sous-menus en dur (#000 sur #F0F3F5) : ramené aux jetons */
.fcom_wrap ul.fcom_inner_menu li a.router-link-exact-active {
  color: var(--primary-dark);
  background: var(--fcom-active-bg);
}

/* L'aplat vif « par touche » de la DA : un filet orange sous le menu haut, et rien d'autre en continu */
.fcom_wrap .fcom_top_menu {
  border-bottom: 3px solid var(--secondary);
}

/* Boutons : la pilule .jpv-bouton de la vitrine (Fredoka 600, --radius-circle, relief au survol) */
.fcom_wrap .el-button,
.fcom_wrap .fcom_btn,
.fcom_wrap .fcom_primary_button,
.fcom_wrap .fcom_secondary_button {
  font-family: var(--jpv-font-titres) !important;
  font-weight: 600;
  border-radius: var(--radius-circle);
  transition: transform .15s, box-shadow .15s, background-color .15s;
}

/* Action principale : orange sur texte sombre, comme le bouton d'appel du menu de la vitrine (.jpv-flex-nav__link--cta) */
.fcom_wrap .el-button--primary:not(.is-link):not(.is-text),
.fcom_wrap .fcom_primary_button,
.fcom_wrap .el-button.fcom_primary_button {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--base-ultra-dark);
}
.fcom_wrap .el-button--primary:not(.is-link):not(.is-text):hover,
.fcom_wrap .el-button--primary:not(.is-link):not(.is-text):focus-visible,
.fcom_wrap .fcom_primary_button:hover,
.fcom_wrap .fcom_primary_button:focus-visible {
  background: var(--secondary-hover, var(--secondary-dark));
  border-color: var(--secondary-hover, var(--secondary-dark));
  color: var(--base-ultra-dark);
  transform: translateY(-1px);
  box-shadow: var(--jpv-ombre-carte);
}

/* Action secondaire : pilule blanche cerclée de turquoise foncé */
.fcom_wrap .el-button.fcom_secondary_button {
  background: var(--white);
  color: var(--primary-dark);
  border: 1px solid var(--primary-dark);
}

/* Cartes (espaces, cours, annuaire, fil en mode cartes, boîte d'accueil, cours, composeur) : la carte de la vitrine — blanc, --radius-m, ombre douce, sans bordure */
.fcom_wrap .fcom_box_card_list .fcom_each_box_card,
.fcom_wrap .fcom_feed_style_card .fcom_feed_card,
.fcom_wrap .fcom_welcome_box,
.fcom_wrap .fcom_feed_box.course_box,
.fcom_wrap .fcom_create_status_box {
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--jpv-ombre-carte);
  border-color: transparent;
}
.fcom_wrap .fcom_box_card_list .fcom_each_box_card .fcom_box_card_info {
  border-color: transparent;
  border-bottom-left-radius: var(--radius-m);
  border-bottom-right-radius: var(--radius-m);
}
.fcom_wrap .fcom_box_card_list .fcom_each_box_card:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--black) 10%, transparent);
  transform: translateY(-2px);
}

/* Liens dans les contenus : turquoise foncé souligné d'orange, comme les liens de prose de la vitrine */
.fcom_wrap .fcom_wp_content a:not(.el-button),
.fcom_wrap .feed_md_content a:not(.el-button) {
  color: var(--primary-dark);
  text-decoration-color: var(--secondary);
  text-underline-offset: .15em;
}

/* Champs (Element Plus) : angles --radius-m, fond blanc, anneau de focus ACSS comme les formulaires de la vitrine */
.fcom_wrap .el-input__wrapper,
.fcom_wrap .el-textarea__inner {
  border-radius: var(--radius-m);
  background-color: var(--white);
}
.fcom_wrap .el-input__wrapper.is-focus,
.fcom_wrap .el-textarea__inner:focus {
  box-shadow: 0 0 0 var(--focus-width, 2px) var(--focus-color) inset;
}

/* Bouton « remonter » : la seule autre touche de violet, sur une petite surface, comme l'exige la DA */
.fcom_wrap .fcom_scroll_to_top {
  background: var(--tertiary);
  color: var(--white);
  border-radius: var(--radius-circle);
}
.fcom_wrap .fcom_scroll_to_top:hover {
  background: color-mix(in oklch, var(--tertiary), var(--white) 15%);
}

/* ── La page de connexion et d'invitation de l'espace (?fcom_action=auth), chartée depuis le 27/10 (jpv-28) : le mu-plugin
   fc-connexion y appelle portal_head. Sa racine est `.fluent_com_auth`, pas `.fluent_com` : les jetons locaux y sont reposés. */
.fluent_com_auth {
  --jpv-font-titres: 'Fredoka', system-ui, sans-serif;
  --jpv-fond-alt: color-mix(in oklch, var(--base-ultra-light), var(--secondary) 6%);
}
/* Le texte en Nunito (--text-font-family d'ACSS), comme le portail : acss-fc-font-family.css ne vise que le portail */
.fcom_full_layout.fluent_com_auth,
.fcom_full_layout.fluent_com_auth :not(h1, h2, h3, h4, h5, h6) {
  font-family: var(--text-font-family);
}
/* Le bandeau (logo, accroche) : le crème « section alternée » de la vitrine, là où FC peint un gris. FC l'écrit EN LIGNE sur
   l'élément (style="background-color: #F5F7FA", réglage background_color du bandeau) : seul !important passe devant
   (mesuré au navigateur le 27/10 ; un hexadécimal dans le réglage figerait la couleur hors des jetons). */
.fcom_full_layout.fluent_com_auth .fcom_layout_side {
  background-color: var(--jpv-fond-alt) !important;
}
/* Le formulaire : le crème de page, comme le portail ; les champs blancs s'en détachent */
.fcom_full_layout.fluent_com_auth .fcom_layout_main {
  background: var(--base-ultra-light);
}
/* Les titres : Fredoka, capitales, violet — FC pose leur couleur EN LIGNE (réglage title_color), d'où !important */
.fluent_com_auth h2,
.fluent_com_auth .fcom_title {
  font-family: var(--jpv-font-titres) !important;
  font-weight: 700;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-wrap: balance;
  color: var(--tertiary) !important;
}
.fluent_com_auth .fcom_sub_title {
  color: var(--text-dark-muted) !important;
}