/* ============================================================
Tokens de marque — surchargez ces variables côté thème merene
pour adapter la charte (ou via la page de réglages du plugin).
============================================================ */
:root{
--wpf-primary: #005AA0;
--wpf-primary-dark: #013862;
--wpf-secondary: #009BDE;
--wpf-tertiary: #F29BA1;
--wpf-accent: #F29BA1;
--wpf-accent-dark: #E68289;
}
/* ============================================================
Merene — Contribution wpForo : styles regroupés
Source : _wpforo.css + _wp-foro-forms.css + _wpforo-auth.css
============================================================ */
/* ---------- _wpforo.css ---------- */
/* ==========================================================================
wpForo — Mise à la charte Tanika v5
Basé sur HTML source réel du layout 4 (Threaded)
========================================================================== */
#wpforo {
/* NB : ne PAS écrire `--wpf-primary: var(--wpf-primary)` ici — l'auto-référence
rend la variable invalide sur #wpforo et casse toutes les couleurs
(badges, boutons, liens). On reprend donc les valeurs concrètes. */
--wpf-primary: #005AA0;
--wpf-primary-dark: #013862;
--wpf-secondary: #009BDE;
--wpf-tertiary: #F29BA1;
--wpf-accent: #F29BA1;
--wpf-surface: #ffffff;
--wpf-border: #E2E8F0;
--wpf-text: #0F1B4D;
--wpf-text-muted: #6B7A99;
--wpf-radius: 10px;
--wpf-font: "Roboto", Inter, system-ui, sans-serif;
}
/* --------------------------------------------------------------------------
Base — fond blanc partout
-------------------------------------------------------------------------- */
#wpforo,
#wpforo-wrap,
#wpforo #wpforo-wrap,
#wpforo #wpforo-wrap .wpforo-main,
#wpforo #wpforo-wrap .wpforo-content,
#wpforo #wpforo-wrap .wpfl-4 {
background-color: #ffffff !important;
font-family: var(--wpf-font) !important;
color: var(--wpf-text) !important;
}
#wpforo #wpforo-wrap {
padding: 0 !important;
}
/* --------------------------------------------------------------------------
MASQUER — éléments inutiles (classes réelles confirmées)
-------------------------------------------------------------------------- */
/* Bouton "S'inscrire nouvelles réponses" */
#wpforo #wpforo-wrap .wpf-subscribe-topic { display: none !important; }
/* Boutons profil/activité colonne gauche */
#wpforo #wpforo-wrap .wpf-member-profile-buttons { display: none !important; }
/* Nicename (@...) */
#wpforo #wpforo-wrap .wpf-author-nicename { display: none !important; }
/* Bouton RSS + zone bottom de l'en-tête topic */
#wpforo #wpforo-wrap .wpf-post-head-bottom { display: none !important; }
/* "Début du sujet" */
#wpforo #wpforo-wrap .wpf-post-starter { display: none !important; }
/* Footer Forum Jump */
#wpforo #wpforo-wrap .wpforo-topic-footer { display: none !important; }
/* Topic overview panel */
#wpforo #wpforo-wrap .wpf-topic-more-info { display: none !important; }
/* Info forum (Forum principal / Dernier post par...) */
#wpforo #wpforo-wrap .wpf-post-info { display: none !important; }
/* Bouton "..." stats */
#wpforo #wpforo-wrap .wpf-post-stat-box.wpf-pb-more { display: none !important; }
/* Champ Titre dans le formulaire */
/* #wpforo #wpforo-wrap .wpf-row-title .wpf-field-name-title { display: none !important; } */
/* Zone révisions */
#wpforo #wpforo-wrap .wpforo-revisions-wrap { display: none !important; }
/* wpf-left sur les posts parents (juste "Posts: X", inutile) */
#wpforo #wpforo-wrap .wpf-parent-post .wpf-left { display: none !important; }
/* Lien de partage en haut à droite des posts parents (dans wpf-content-head-bottom) */
/* On garde visible mais discret — voir section wpf-post-btns ci-dessous */
/* --------------------------------------------------------------------------
En-tête du topic — titre + pagination + stats
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpf-head-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 0 16px 0 !important;
border-bottom: 2px solid var(--wpf-border) !important;
margin-bottom: 20px !important;
background: transparent !important;
gap: 16px !important;
}
/* Masquer le bouton subscribe dans le head-bar */
#wpforo #wpforo-wrap .wpf-action-link {
display: none !important;
}
#wpforo #wpforo-wrap #wpforo-title {
font-family: var(--wpf-font) !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--wpf-primary) !important;
margin: 0 !important;
}
/* --------------------------------------------------------------------------
Pagination — .wpf-navi (top et bottom)
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpf-navi {
background: transparent !important;
border: none !important;
padding: 8px 0 !important;
}
#wpforo #wpforo-wrap .wpf-navi-wrap {
display: flex !important;
align-items: center !important;
gap: 8px !important;
justify-content: flex-end !important;
background: transparent !important;
}
/* Texte "Page 1 / 2" */
#wpforo #wpforo-wrap .wpf-page-info {
font-family: var(--wpf-font) !important;
font-size: 0.82rem !important;
color: var(--wpf-text-muted) !important;
white-space: nowrap !important;
}
/* Select dropdown de page */
#wpforo #wpforo-wrap .wpf-navi-dropdown {
font-family: var(--wpf-font) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
color: var(--wpf-primary) !important;
background: #ffffff !important;
border: 1.5px solid var(--wpf-primary) !important;
border-radius: 6px !important;
padding: 5px 10px !important;
cursor: pointer !important;
outline: none !important;
min-width: 50px !important;
}
/* Bouton "Suivant >" */
#wpforo #wpforo-wrap .wpf-next-button {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-family: var(--wpf-font) !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
color: #ffffff !important;
background: var(--wpf-primary) !important;
border: none !important;
border-radius: 6px !important;
padding: 6px 14px !important;
text-decoration: none !important;
transition: background 0.2s !important;
}
#wpforo #wpforo-wrap .wpf-next-button:hover {
background: var(--wpf-primary-dark) !important;
color: #ffffff !important;
}
/* --------------------------------------------------------------------------
Stats du topic (Posts / Utilisateurs / Réactions / Vus)
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpforo-post-head {
background: transparent !important;
border: none !important;
padding: 0 0 16px 0 !important;
margin-bottom: 16px !important;
}
#wpforo #wpforo-wrap .wpforo-topic-head-wrap {
background: transparent !important;
margin-top: 16px;
}
#wpforo #wpforo-wrap .wpf-post-head-top {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
}
#wpforo #wpforo-wrap .wpf-post-stat {
display: flex !important;
gap: 20px !important;
align-items: center !important;
}
#wpforo #wpforo-wrap .wpf-post-stat-box {
background: transparent !important;
border: none !important;
padding: 0 !important;
text-align: center !important;
box-shadow: none !important;
}
#wpforo #wpforo-wrap .wpf-tstat {
display: block !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
color: var(--wpf-primary) !important;
line-height: 1 !important;
}
#wpforo #wpforo-wrap .wpf-tstat svg { display: none !important; }
#wpforo #wpforo-wrap .wpf-tlabel {
font-size: 0.65rem !important;
color: var(--wpf-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* --------------------------------------------------------------------------
Séparateur "10 Réponses" — #wpf-replies-sep
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap #wpf-replies-sep {
border: none !important;
border-top: none !important;
margin: 16px 0 8px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
#wpforo #wpforo-wrap #wpf-replies-sep::after {
content: '' !important;
flex: 1 !important;
height: 1px !important;
background: var(--wpf-border) !important;
display: block !important;
}
#wpforo #wpforo-wrap .wpf-replies-title {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-family: var(--wpf-font) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
color: var(--wpf-text-muted) !important;
white-space: nowrap !important;
/* Supprimer style wpForo par défaut */
border: none !important;
background: transparent !important;
padding: 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* --------------------------------------------------------------------------
Toggle réponses — #wpf-ttgg-1 = .wpf-post-replies-bar
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpf-post-replies-bar {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 6px 0 6px 0 !important;
padding: 6px 12px !important;
background: rgba(0, 90, 160,0.04) !important;
border: 1px solid rgba(0, 90, 160,0.12) !important;
border-radius: 20px !important;
cursor: pointer !important;
width: fit-content !important;
/* Supprimer anciens styles */
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
transition: background 0.2s !important;
}
#wpforo #wpforo-wrap .wpf-post-replies-bar:hover {
background: rgba(0, 90, 160,0.09) !important;
}
#wpforo #wpforo-wrap .wpf-post-replies-info {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
#wpforo #wpforo-wrap .wpf-post-replies-title {
font-family: var(--wpf-font) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--wpf-primary) !important;
}
#wpforo #wpforo-wrap .wpf-post-replies-bar .far.fa-comments {
color: var(--wpf-primary) !important;
font-size: 0.85rem !important;
}
/* Séparateur entre info et icône toggle */
#wpforo #wpforo-wrap .wpf-prsep {
width: 1px !important;
height: 14px !important;
background: rgba(0, 90, 160,0.2) !important;
margin: 0 2px !important;
}
/* Icône chevron toggle */
#wpforo #wpforo-wrap .wpforo-ttgg {
color: var(--wpf-primary) !important;
font-size: 0.8rem !important;
cursor: pointer !important;
}
/* --------------------------------------------------------------------------
Post parent — wpf-parent-post
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .post-wrap {
margin-bottom: 12px !important;
}
#wpforo #wpforo-wrap .wpforo-post.wpf-parent-post {
background: var(--wpf-surface) !important;
border: 1px solid var(--wpf-border) !important;
border-radius: var(--wpf-radius) !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Premier post : liseré primary */
#wpforo #wpforo-wrap .wpfp-first .wpforo-post.wpf-parent-post {
border-left: 4px solid var(--wpf-primary) !important;
}
/* --------------------------------------------------------------------------
En-tête du post parent — wpf-content-head
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpf-content-head {
padding: 14px 20px 10px !important;
border-bottom: 1px solid var(--wpf-border) !important;
background: transparent !important;
}
#wpforo #wpforo-wrap .wpf-content-head-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
margin-bottom: 4px !important;
}
#wpforo #wpforo-wrap .wpf-content-head-bottom {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
/* Nom de l'auteur */
#wpforo #wpforo-wrap .wpf-content-head .wpf-author-name a {
font-weight: 700 !important;
font-size: 0.85rem !important;
color: var(--wpf-primary) !important;
text-decoration: none !important;
}
#wpforo #wpforo-wrap .wpf-content-head .wpf-author-name .is_guest {
font-weight: 700 !important;
font-size: 0.85rem !important;
color: var(--wpf-text-muted) !important;
}
/* Indicateur en ligne */
#wpforo #wpforo-wrap .wpf-content-head .wpfsx {
font-size: 8px !important;
}
/* Badge Admin */
#wpforo #wpforo-wrap .wpf-content-head .wpfut {
display: inline-block !important;
background: var(--wpf-primary) !important;
color: #ffffff !important;
border-radius: 20px !important;
padding: 2px 8px !important;
font-size: 0.65rem !important;
font-weight: 600 !important;
border: none !important;
}
/* Badge Membre */
#wpforo #wpforo-wrap .wpf-content-head .wpfct {
display: inline-block !important;
background: rgba(0, 90, 160,0.08) !important;
color: var(--wpf-primary) !important;
border-radius: 20px !important;
padding: 2px 8px !important;
font-size: 0.65rem !important;
font-weight: 600 !important;
border: none !important;
}
/* Date du post */
#wpforo #wpforo-wrap .wpf-content-head .wpf-post-date {
font-size: 0.75rem !important;
color: var(--wpf-text-muted) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* Inscription date */
#wpforo #wpforo-wrap .wpf-author-joined {
font-size: 0.7rem !important;
color: var(--wpf-text-muted) !important;
}
/* Lien de partage (icône chaîne) */
#wpforo #wpforo-wrap .wpf-post-btns .wpf-action {
color: var(--wpf-text-muted) !important;
font-size: 0.75rem !important;
cursor: pointer !important;
opacity: 0.5 !important;
transition: opacity 0.2s !important;
}
#wpforo #wpforo-wrap .wpf-post-btns .wpf-action:hover {
opacity: 1 !important;
color: var(--wpf-primary) !important;
}
/* --------------------------------------------------------------------------
Corps du post parent — wpf-content
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpf-parent-post .wpf-content {
padding: 16px 20px !important;
background: transparent !important;
}
#wpforo #wpforo-wrap .wpforo-post-content,
#wpforo #wpforo-wrap .wpforo-post-content p {
font-family: var(--wpf-font) !important;
font-size: 0.95rem !important;
line-height: 1.75 !important;
color: var(--wpf-text) !important;
margin-block: 0 0.5em !important;
}
#wpforo #wpforo-wrap .wpforo-post-content p:last-child {
margin-bottom: 0 !important;
}
/* Message "modifié" */
#wpforo #wpforo-wrap .wpf-post-edited {
font-size: 0.72rem !important;
color: var(--wpf-text-muted) !important;
font-style: italic !important;
margin-top: 8px !important;
}
/* --------------------------------------------------------------------------
Pied du post parent — wpf-content-foot
Contient : wpf-reply (bouton Répondre) + wpf-buttons (Citation)
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpf-parent-post .wpf-content-foot {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 20px !important;
border-top: 1px solid var(--wpf-border) !important;
background: transparent !important;
}
/* Bouton Répondre — .wpforo-reply.wpf-action */
#wpforo #wpforo-wrap .wpforo-reply.wpf-action {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
background: transparent !important;
color: var(--wpf-primary) !important;
border: 1.5px solid var(--wpf-primary) !important;
border-radius: 6px !important;
padding: 5px 12px !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
font-family: var(--wpf-font) !important;
cursor: pointer !important;
transition: all 0.2s !important;
line-height: 1.4 !important;
}
#wpforo #wpforo-wrap .wpforo-reply.wpf-action:hover {
background: var(--wpf-primary) !important;
color: #fff !important;
}
#wpforo #wpforo-wrap .wpf-button-text {
font-size: 0.78rem !important;
}
/* Bouton Citation */
#wpforo #wpforo-wrap .wpforo-quote.wpf-action {
display: inline-flex !important;
align-items: center !important;
background: transparent !important;
color: var(--wpf-text-muted) !important;
border: 1.5px solid var(--wpf-border) !important;
border-radius: 6px !important;
padding: 5px 10px !important;
font-size: 0.78rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
#wpforo #wpforo-wrap .wpforo-quote.wpf-action:hover {
border-color: var(--wpf-primary) !important;
color: var(--wpf-primary) !important;
}
/* Réactions */
#wpforo #wpforo-wrap .reacted-users,
#wpforo #wpforo-wrap .reacted-users a {
font-size: 0.7rem !important;
color: var(--wpf-text-muted) !important;
padding: 0 20px 8px !important;
}
/* --------------------------------------------------------------------------
Réponses imbriquées — .wpf-post-replies.level-1
Structure : .wpf-child-post > .wpf-reply-head + .wpf-reply-content
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpf-post-replies {
margin-left: 32px !important;
margin-top: 6px !important;
margin-bottom: 6px !important;
border-left: 2px solid var(--wpf-border) !important;
padding-left: 12px !important;
}
#wpforo #wpforo-wrap .wpf-post-replies .reply-wrap {
margin-bottom: 8px !important;
}
#wpforo #wpforo-wrap .wpforo-post.wpf-child-post {
background: var(--wpf-surface) !important;
border: 1px solid var(--wpf-border) !important;
border-left: 3px solid var(--wpf-tertiary) !important;
border-radius: 8px !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* En-tête de la réponse imbriquée — wpf-reply-head */
#wpforo #wpforo-wrap .wpf-reply-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 10px 16px !important;
background: #F8FAFF !important;
border-bottom: 1px solid var(--wpf-border) !important;
flex-wrap: wrap !important;
}
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-head {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-name a,
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-name .is_guest {
font-weight: 700 !important;
font-size: 0.82rem !important;
color: var(--wpf-primary) !important;
text-decoration: none !important;
}
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-name .is_guest {
color: var(--wpf-text-muted) !important;
}
/* Masquer la date d'inscription dans les réponses imbriquées */
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-joined,
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-posts {
display: none !important;
}
#wpforo #wpforo-wrap .wpf-reply-head .wpforo-memberinfo {
display: none !important;
}
#wpforo #wpforo-wrap .wpf-reply-head .wpf-post-date {
font-size: 0.72rem !important;
color: var(--wpf-text-muted) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* Icône lien partage dans les réponses */
#wpforo #wpforo-wrap .wpf-reply-head .wpf-post-btns .wpf-action {
color: var(--wpf-text-muted) !important;
font-size: 0.72rem !important;
opacity: 0.5 !important;
cursor: pointer !important;
}
/* Corps de la réponse imbriquée — wpf-reply-content */
#wpforo #wpforo-wrap .wpf-reply-content {
padding: 12px 16px !important;
background: transparent !important;
}
/* Fil "Répondre à X" */
#wpforo #wpforo-wrap .wpf-reply-tree {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 0.75rem !important;
color: var(--wpf-text-muted) !important;
margin-bottom: 8px !important;
}
#wpforo #wpforo-wrap .wpf-reply-to a {
color: var(--wpf-secondary) !important;
font-weight: 600 !important;
font-size: 0.75rem !important;
}
/* Pied de la réponse imbriquée */
#wpforo #wpforo-wrap .wpf-reply-content .wpf-content-foot {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px solid var(--wpf-border) !important;
background: transparent !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
}
/* --------------------------------------------------------------------------
Blockquote (citation dans le contenu)
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpforo-post-content blockquote {
background: #F0F4FF !important;
border-left: 3px solid var(--wpf-primary) !important;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 4px !important;
padding: 10px 14px !important;
margin: 10px 0 !important;
font-size: 0.88rem !important;
color: var(--wpf-text-muted) !important;
}
#wpforo #wpforo-wrap .wpforo-post-quote-head {
display: flex !important;
justify-content: space-between !important;
margin-bottom: 6px !important;
}
#wpforo #wpforo-wrap .wpforo-post-quote-author strong {
font-size: 0.75rem !important;
color: var(--wpf-primary) !important;
}
/* En attente de modération */
#wpforo #wpforo-wrap .wpf-mod-message {
font-size: 0.75rem !important;
color: #e07000 !important;
}
/* --------------------------------------------------------------------------
Formulaire inline (s'ouvre au clic sur Répondre)
.wpforo-post-form (display: none par défaut, affiché par JS)
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpforo-post-form {
background: #ffffff !important;
border: 1px solid var(--wpf-border) !important;
border-radius: 8px !important;
padding: 16px !important;
margin-top: 8px !important;
}
#wpforo #wpforo-wrap .wpforo-post-form .wpf-post-guest-fields {
background: transparent !important;
margin-bottom: 12px !important;
}
#wpforo #wpforo-wrap .wpforo-post-form .wpf-post-guest-name,
#wpforo #wpforo-wrap .wpforo-post-form .wpf-post-guest-email {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 8px !important;
}
#wpforo #wpforo-wrap .wpforo-post-form label {
font-family: var(--wpf-font) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--wpf-text-muted) !important;
white-space: nowrap !important;
}
#wpforo #wpforo-wrap .wpforo-post-form input[type="text"] {
font-family: var(--wpf-font) !important;
background: #F8FAFF !important;
border: 1px solid var(--wpf-border) !important;
border-radius: 6px !important;
color: var(--wpf-text) !important;
font-size: 0.88rem !important;
padding: 8px 12px !important;
width: 100% !important;
transition: border-color 0.2s !important;
}
#wpforo #wpforo-wrap .wpforo-post-form input[type="text"]:focus {
border-color: var(--wpf-secondary) !important;
outline: none !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(0, 155, 222,0.1) !important;
}
/* Bouton Répondre (submit) du formulaire inline */
#wpforo #wpforo-wrap .wpforo-post-form button[type="submit"],
#wpforo #wpforo-wrap .wpforo-post-form .wpf-button[type="submit"] {
font-family: var(--wpf-font) !important;
background: var(--wpf-primary) !important;
color: #ffffff !important;
border: none !important;
border-radius: 7px !important;
padding: 9px 20px !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
cursor: pointer !important;
transition: background 0.2s !important;
}
#wpforo #wpforo-wrap .wpforo-post-form button[type="submit"]:hover {
background: var(--wpf-primary-dark) !important;
}
/* Bouton Annuler du formulaire inline */
#wpforo #wpforo-wrap .wpforo-post-form .wpf-button-secondary {
font-family: var(--wpf-font) !important;
background: transparent !important;
color: var(--wpf-text-muted) !important;
border: 1px solid var(--wpf-border) !important;
border-radius: 7px !important;
padding: 9px 16px !important;
font-size: 0.85rem !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
/* --------------------------------------------------------------------------
Formulaire principal "Laisser une réponse" — .wpf-form-wrapper.wpfel-4
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 {
background: #ffffff !important;
border: 1px solid var(--wpf-border) !important;
border-radius: var(--wpf-radius) !important;
padding: 24px !important;
margin: auto !important;
margin-top: 0 !important;
margin-bottom: 32px !important;
}
#wpforo #wpforo-wrap .wpf-form-wrapper .wpf-button {
padding: 0px 28px !important;
}
#wpforo #wpforo-wrap .wpf-reply-form-title {
font-family: var(--wpf-font) !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
color: var(--wpf-primary) !important;
margin: 0 0 20px 0 !important;
padding-bottom: 14px !important;
border-bottom: 2px solid var(--wpf-border) !important;
}
#wpforo #wpforo-wrap .wpf-post-create,
#wpforo #wpforo-wrap .wpforoeditor {
background: #ffffff !important;
}
#wpforo #wpforo-wrap .wpf-label {
font-family: var(--wpf-font) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
color: var(--wpf-text-muted) !important;
}
#wpforo #wpforo-wrap .wpf-post-create input[type="text"],
#wpforo #wpforo-wrap .wpf-post-create input[type="email"],
#wpforo #wpforo-wrap .wpf-post-create textarea,
#wpforo #wpforo-wrap .wpf-post-create select {
font-family: var(--wpf-font) !important;
background: #F8FAFF !important;
border: 1px solid var(--wpf-border) !important;
border-radius: 6px !important;
color: var(--wpf-text) !important;
font-size: 0.9rem !important;
padding: 10px 14px !important;
transition: border-color 0.2s !important;
width: 100% !important;
}
#wpforo #wpforo-wrap .wpf-post-create input[type="text"]:focus,
#wpforo #wpforo-wrap .wpf-post-create input[type="email"]:focus {
border-color: var(--wpf-secondary) !important;
outline: none !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(0, 155, 222,0.1) !important;
}
#wpforo #wpforo-wrap .wpf-tr,
#wpforo #wpforo-wrap .wpf-td,
#wpforo #wpforo-wrap .wpf-field-wrap,
#wpforo #wpforo-wrap .wpf-field {
background: transparent !important;
border-bottom: none !important;
}
#wpforo #wpforo-wrap .wpf-post-create input[type="submit"],
#wpforo #wpforo-wrap .wpf-post-create .wpf-button[type="submit"] {
font-family: var(--wpf-font) !important;
background-color: var(--wpf-primary) !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 0 28px !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
cursor: pointer !important;
transition: background-color 0.2s !important;
}
#wpforo #wpforo-wrap .wpf-post-create input[type="submit"]:hover {
background-color: var(--wpf-primary-dark) !important;
}
/* --------------------------------------------------------------------------
Breadcrumb + liens généraux
-------------------------------------------------------------------------- */
#wpforo #wpforo-wrap #wpforo-breadcrumb,
#wpforo #wpforo-wrap #wpforo-breadcrumb a {
color: var(--wpf-text-muted) !important;
font-size: 0.78rem !important;
font-family: var(--wpf-font) !important;
}
#wpforo #wpforo-wrap .wpforo-subtop { background: transparent !important; }
#wpforo #wpforo-wrap a { color: var(--wpf-secondary) !important; }
#wpforo #wpforo-wrap a:hover { color: var(--wpf-primary) !important; }
/* Correction liens auteurs (couleur inline wpForo = #FF3333) */
#wpforo #wpforo-wrap .wpf-content-head .wpf-author-name a[style],
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-name a[style] {
color: var(--wpf-primary) !important;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
#wpforo #wpforo-wrap .wpf-post-replies {
margin-left: 12px !important;
}
#wpforo #wpforo-wrap .wpf-content-head,
#wpforo #wpforo-wrap .wpf-reply-head {
padding: 10px 14px !important;
}
#wpforo #wpforo-wrap .wpf-parent-post .wpf-content,
#wpforo #wpforo-wrap .wpf-reply-content {
padding: 12px 14px !important;
}
#wpforo #wpforo-wrap #wpforo-title {
font-size: 1.1rem !important;
}
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-parent-post .wpf-right {
padding: 0 !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot {
border-radius: 0 !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpforo-post-footer .reacted-users {
display: none !important;
}
#wpforo #wpforo-wrap .wpf-reaction-count {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--wpf-text-muted) !important;
font-family: var(--wpf-font) !important;
margin-left: auto !important;
}
#wpforo #wpforo-wrap .wpf-reaction-coun span {
display: flex;
font-weight: normal;
justify-content: center;
align-items: center;
gap: 2px;
}
#wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpforo-post-footer {
background-color: #FFFFFF !important;
}
#wpforo #wpforo-wrap .wpfl-4 .wpforo-post :not(.wpf-reply-content) .wpforo-post-footer {
padding-left: 16px;
}
#wpforo #wpforo-wrap .wpf-reaction-count svg {
width: 13px !important;
height: 13px !important;
fill: var(--wpf-text-muted) !important;
flex-shrink: 0 !important;
}
/* Bouton "< Retour" — pagination précédente */
#wpforo #wpforo-wrap .wpf-prev-button {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-family: var(--wpf-font) !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
color: var(--wpf-primary) !important;
background: transparent !important;
border: 1.5px solid var(--wpf-primary) !important;
border-radius: 6px !important;
padding: 6px 14px !important;
text-decoration: none !important;
transition: all 0.2s !important;
}
#wpforo #wpforo-wrap .wpf-prev-button:hover {
background: var(--wpf-primary) !important;
color: #ffffff !important;
}
#wpforo #wpforo-wrap.wpft-post .wpf-head-bar {
display: none !important;
}
#wpforo-menu .wpforo-home,
#wpforo-menu .wpforo-members,
#wpforo-menu .wpforo-recent {
display: none !important;
}
.wpforo-profile .wpforo-profile-back {
display: none !important;
}
/* =============================================
wpForo — Menu accès rapide fixe bord droit
============================================= */
#wpforo-menu {
position: fixed !important;
right: 0 !important;
top: 30% !important;
transform: translateY(-50%) !important;
z-index: 99999 !important;
background: transparent !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
display: block !important;
}
/* Masquer les éléments inutiles */
#wpforo-menu .wpf-bar-right,
#wpforo-menu .wpf-res-menu,
#wpforo-menu .wpf-search {
display: none !important;
}
#wpforo-menu .wpf-left {
display: block !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
width: auto !important;
}
/* La liste */
#wpforo-menu #wpf-menu {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Chaque item — position relative pour ancrer le lien */
#wpforo-menu #wpf-menu li {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
height: 56px !important;
overflow: hidden !important;
position: relative !important;
cursor: pointer !important;
border-bottom: 1px solid transparent !important;
}
#wpforo-menu #wpf-menu li:hover {
border-bottom: 1px solid transparent !important;
}
/* Le lien couvre tout le et est au-dessus des ::before/::after */
#wpforo-menu #wpf-menu li a {
position: absolute !important;
inset: 0 !important;
z-index: 10 !important;
font-size: 0 !important;
color: transparent !important;
text-decoration: none !important;
display: block !important; /* pas contents */
}
/* --- ICÔNE via ::after sur le --- */
#wpforo-menu #wpf-menu li::after {
content: '' !important;
display: flex !important;
width: 56px !important;
min-width: 56px !important;
height: 56px !important;
background-color: var(--wpf-primary) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 26px 26px !important;
flex-shrink: 0 !important;
transition: background-color 0.2s ease !important;
z-index: 1 !important;
}
/* Les pseudo-éléments passent sous le lien */
#wpforo-menu #wpf-menu li::before,
#wpforo-menu #wpf-menu li::after {
z-index: 1 !important;
position: relative !important;
}
#wpforo-menu #wpf-menu li:hover::after {
background-color: var(--wpf-secondary) !important;
}
/* --- LABEL TEXTE via ::before sur le --- */
#wpforo-menu #wpf-menu li::before {
display: flex !important;
align-items: center !important;
height: 56px !important;
background: var(--wpf-secondary) !important;
color: #fff !important;
font-family: "Roboto", Inter, system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
max-width: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
padding: 0 !important;
transition: max-width 0.3s ease, opacity 0.25s ease, padding 0.3s ease !important;
}
#wpforo-menu #wpf-menu li:hover::before {
max-width: 260px !important;
opacity: 1 !important;
padding: 0 20px !important;
}
/* --- ICÔNES SVG par classe --- */
#wpforo-menu #wpf-menu .wpforo-register::after,
#wpforo-menu #wpf-menu .wpforo-profile::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25.352' height='21.744' viewBox='0 0 25.352 21.744'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_167' data-name='Rectangle 167' width='25.352' height='21.744' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Groupe_261' data-name='Groupe 261' transform='translate(0.001)'%3E%3Cg id='Groupe_260' data-name='Groupe 260' transform='translate(-0.001 0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Tracé_275' data-name='Tracé 275' d='M42.1,3.162H40.428V1.489a1.42,1.42,0,0,0-2.84,0V3.162H35.915a1.42,1.42,0,1,0,0,2.839h1.673V7.675a1.42,1.42,0,0,0,2.84,0V6H42.1a1.42,1.42,0,1,0,0-2.839' transform='translate(-18.17 -0.036)' fill='%23F29BA1'/%3E%3Cpath id='Tracé_276' data-name='Tracé 276' d='M0,18.228v1.95a1.566,1.566,0,0,0,1.566,1.566H15.245a1.566,1.566,0,0,0,1.566-1.566v-1.95a8.4,8.4,0,0,0-4.794-7.581,5.94,5.94,0,1,0-7.223,0A8.4,8.4,0,0,0,0,18.228' transform='translate(0 0)' fill='%23009BDE'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
#wpforo-menu #wpf-menu .wpforo-register:hover::after,
#wpforo-menu #wpf-menu .wpforo-profile:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.352' height='21.744' viewBox='0 0 25.352 21.744'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 0h25.352v21.744H0z' data-name='Rectangle 167'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Groupe 261'%3E%3Cg clip-path='url(%23a)' data-name='Groupe 260'%3E%3Cpath fill='%23F29BA1' d='M23.93 3.126h-1.672V1.453a1.42 1.42 0 0 0-2.84 0v1.673h-1.673a1.42 1.42 0 1 0 0 2.839h1.673v1.674a1.42 1.42 0 0 0 2.84 0V5.964h1.672a1.42 1.42 0 1 0 0-2.839' data-name='Tracé 275'/%3E%3Cpath fill='%23013862' d='M0 18.228v1.95a1.566 1.566 0 0 0 1.566 1.566h13.679a1.566 1.566 0 0 0 1.566-1.566v-1.95a8.4 8.4 0 0 0-4.794-7.581 5.94 5.94 0 1 0-7.223 0A8.4 8.4 0 0 0 0 18.228' data-name='Tracé 276'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#wpforo-menu #wpf-menu .wpforo-login::after,
#wpforo-menu #wpf-menu .wpforo-logout::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.187' height='21.379' data-name='Groupe 259' viewBox='0 0 21.187 21.379'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 0h21.187v21.379H0z' data-name='Rectangle 166'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' data-name='Groupe 258'%3E%3Cpath fill='%23009BDE' d='M12.487 19.1h-9.22a.99.99 0 0 1-.989-.99V3.267a.99.99 0 0 1 .989-.99h9.221a1.139 1.139 0 0 0 0-2.278H3.267A3.27 3.27 0 0 0 0 3.267v14.845a3.27 3.27 0 0 0 3.267 3.267h9.221a1.139 1.139 0 0 0 0-2.278' data-name='Tracé 273'/%3E%3Cpath fill='%23F29BA1' d='m20.905 9.653-4.213-3.8a.854.854 0 0 0-1.426.634v2.664H5.165a1.139 1.139 0 0 0 0 2.278h10.1v2.663a.854.854 0 0 0 1.426.634l4.213-3.8a.854.854 0 0 0 0-1.268' data-name='Tracé 274'/%3E%3C/g%3E%3C/svg%3E");
}
#wpforo-menu #wpf-menu .wpforo-login:hover::after,
#wpforo-menu #wpf-menu .wpforo-logout:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.187' height='21.379' data-name='Groupe 259' viewBox='0 0 21.187 21.379'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 0h21.187v21.379H0z' data-name='Rectangle 166'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' data-name='Groupe 258'%3E%3Cpath fill='%23013862' d='M12.487 19.1h-9.22a.99.99 0 0 1-.989-.99V3.267a.99.99 0 0 1 .989-.99h9.221a1.139 1.139 0 0 0 0-2.278H3.267A3.27 3.27 0 0 0 0 3.267v14.845a3.27 3.27 0 0 0 3.267 3.267h9.221a1.139 1.139 0 0 0 0-2.278' data-name='Tracé 273'/%3E%3Cpath fill='%23F29BA1' d='m20.905 9.653-4.213-3.8a.854.854 0 0 0-1.426.634v2.664H5.165a1.139 1.139 0 0 0 0 2.278h10.1v2.663a.854.854 0 0 0 1.426.634l4.213-3.8a.854.854 0 0 0 0-1.268' data-name='Tracé 274'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- LABELS TEXTE par classe --- */
#wpforo-menu #wpf-menu .wpforo-register::before { content: 'CRÉER UN COMPTE' !important; }
#wpforo-menu #wpf-menu .wpforo-login::before { content: 'SE CONNECTER' !important; }
#wpforo-menu #wpf-menu .wpforo-profile::before { content: 'MON COMPTE' !important; }
#wpforo-menu #wpf-menu .wpforo-logout::before { content: 'SE DÉCONNECTER' !important; }
/* wpForo — Masquer boutons Code, Spoiler, Code source, citation, emoji dans l'éditeur */
/* Bouton "source_code" (éditeur HTML source) */
.mce-toolbar-grp .mce-i-code,
.mce-toolbar-grp [aria-label="Source code"],
.mce-toolbar-grp [aria-label="Emoji"],
.mce-toolbar-grp [aria-label="Code source"],
.mce-toolbar-grp [aria-label="Code"],
.mce-toolbar-grp [aria-label="Bloc de citation"],
.mce-toolbar-grp [aria-label*="Spoiler" i] {
display: none !important;
}
#wpforo #wpforo-wrap .wpforo-post .wpf-content-head .wpf-content-head-bottom {
display: none !important;
}
/* ---------- _wp-foro-forms.css ---------- */
.fas.fa-user.wpf-field-icon,
.fas.fa-envelope.wpf-field-icon,
.fas.fa-key.wpf-field-icon {
display: none !important;
}
#wpforo #wpforo-wrap .wpf-field input[type="text"],
#wpforo #wpforo-wrap .wpf-field input[type="search"],
#wpforo #wpforo-wrap .wpf-field input[type="password"],
#wpforo #wpforo-wrap .wpf-field input[type="email"],
#wpforo #wpforo-wrap .wpf-field input[type="date"],
#wpforo #wpforo-wrap .wpf-field input[type="number"],
#wpforo #wpforo-wrap .wpf-field input[type="url"],
#wpforo #wpforo-wrap .wpf-field input[type="tel"],
#wpforo #wpforo-wrap .wpf-field textarea,
#wpforo #wpforo-wrap .wpf-field select {
font-size: 16px !important;
font-weight: 400 !important;
color: var(--wpf-secondary) !important;
background: rgba(0, 155, 222, 0.1) !important;
border: none;
border-radius: 0 !important;
padding: 14px 16px;
outline: none !important;
width: 100% !important;
box-sizing: border-box !important;
transition: background 0.2s, box-shadow 0.2s !important;
}
#wpforo #wpforo-wrap .wpf-field-wrap {
border: none !important;
}
#wpforo #wpforo-wrap .wpf-field .wpf-label-wrap {
width: 100% !important;
}
#wpforo #wpforo-wrap .wpf-field {
display: flex !important;
flex-flow: column nowrap !important;
}
#wpforo #wpforo-wrap .wpf-field .wpf-field-wrap {
width: 100% !important;
}
#wpforo #wpforo-wrap input {
padding-left: 16px !important;
}
#wpforo #wpforo-wrap input::placeholder {
color: var(--wpf-secondary) !important;
opacity: 0.7;
}
#wpforo #wpforo-wrap textarea::placeholder {
color: var(--wpf-secondary) !important;
opacity: 0.7;
}
#wpforo #wpforo-wrap select::placeholder {
color: var(--wpf-secondary) !important;
opacity: 0.7;
}
.wpforo-login-content .wpf-field .wpf-field-wrap {
display: flex !important;
flex-flow: column nowrap !important;
}
.wpforo-register-content .wpf-field .wpf-field-wrap .wpf-field-login,
.wpforo-login-content .wpf-field .wpf-field-wrap .wpf-field-reg {
padding-top: 0 !important;
margin-bottom: 0 !important;
}
#wpforo #wpforo-wrap .wpforo-register-wrap .wpf-field-login a,
.wpforo-login-content .wpf-field .wpf-field-wrap .wpf-field-reg a {
border: none !important;
}
#wpforo #wpforo-wrap .wpforo-login-content .wpf-field.wpf-extra-field-end,
#wpforo #wpforo-wrap .wpforo-register-content .wpf-field.wpf-extra-field-end {
display: none !important;
}
#wpforo #wpforo-wrap .wpf-field-wrap,
#wpforo #wpforo-wrap .wpf-field-wrap input {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
#wpforo #wpforo-wrap .wpforo-register-content .wpf-label-wrap {
display: none !important;
}
#wpforo #wpforo-wrap input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 22px !important;
height: 22px !important;
min-width: 20px !important;
border: 3px solid var(--wpf-accent) !important;
border-radius: 0 !important;
flex-shrink: 0 !important;
cursor: pointer !important;
margin-top: 1px !important;
background: #fff !important;
position: relative !important;
transition: background 0.15s !important;
top: 6px !important;
}
#wpforo #wpforo-wrap input[type="checkbox"]:checked::before {
content: '';
position: absolute !important;
top: 0 !important;
left: 0 !important;
transform: none !important;
width: 11px !important;
height: 11px !important;
background: var(--wpf-primary) !important;
border-radius: 0 !important;
margin: 2.5px !important;
}
#auth-tab-register .wpforo-legal-checkbox span,
#wpforo #wpforo-wrap .wpf-td.wpfw-1,
#wpforo #wpforo-wrap label span,
#wpforo #wpforo-wrap #wpf-login-remember + label {
font-size: 14px !important;
font-weight: 400 !important;
color: var(--wpf-primary-dark) !important;
line-height: 1.5 !important;
margin: 0 !important;
}
#auth-tab-login .auth-modal__form-wrap input[type="checkbox"] {
top: 0px !important;
}
#wpforo #wpforo-wrap .fa-info-circle.wpf-reg-info {
padding-left: 0 !important;
padding-right: 0 !important;
}
#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-extra {
padding: 0 5px 16px 5px !important;
}
/* ==========================================================================
Auth Modal — Modale connexion/inscription + épuration pages wpForo
Fichier : resources/css/_auth-modal.css
========================================================================== */
/* --------------------------------------------------------------------------
Variables
-------------------------------------------------------------------------- */
.auth-modal,
#wpforo #wpforo-wrap .wpforo-login-wrap,
#wpforo #wpforo-wrap .wpforo-register-wrap {
--auth-primary: var(--wpf-primary);
--auth-primary-dark: var(--wpf-primary-dark);
--auth-secondary: var(--wpf-secondary);
--auth-border: #E2E8F0;
--auth-text: #0F1B4D;
--auth-text-muted: #6B7A99;
--auth-bg: #F4F6FB;
--auth-surface: #ffffff;
--auth-radius: 10px;
--auth-font: "Roboto", Inter, system-ui, sans-serif;
}
/* --------------------------------------------------------------------------
MODALE — Structure
-------------------------------------------------------------------------- */
.auth-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
font-family: var(--auth-font);
}
.auth-modal[hidden] { display: none; }
.auth-modal__overlay {
position: absolute;
inset: 0;
background: rgba(7, 23, 119, 0.55);
backdrop-filter: blur(3px);
cursor: pointer;
}
.auth-modal__box {
position: relative;
background: var(--auth-surface);
border-radius: 14px;
width: 100%;
max-width: 460px;
max-height: 92vh;
overflow-y: auto;
box-shadow: 0 24px 60px rgba(7, 23, 119, 0.22);
z-index: 1;
animation: auth-modal-in 0.22s ease;
}
@keyframes auth-modal-in {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Bouton fermer */
.auth-modal__close {
position: absolute;
top: 14px;
right: 14px;
background: transparent;
border: none;
cursor: pointer;
padding: 6px;
color: var(--auth-text-muted);
border-radius: 6px;
transition: color 0.15s, background 0.15s;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.auth-modal__close:hover {
color: var(--auth-primary);
background: var(--auth-bg);
}
.auth-modal__close svg { fill: currentColor; }
/* En-tête */
.auth-modal__header {
padding: 28px 28px 16px;
text-align: center;
border-bottom: 1px solid var(--auth-border);
}
.auth-modal__titre {
font-family: var(--auth-font);
font-size: 1.15rem;
font-weight: 700;
color: var(--auth-primary);
margin: 0 0 6px;
padding-right: 28px;
}
.auth-modal__subtitle {
font-family: var(--auth-font);
font-size: 0.85rem;
color: var(--auth-text-muted);
margin: 0;
line-height: 1.5;
}
/* Onglets */
.auth-modal__tabs {
display: flex;
border-bottom: 2px solid var(--auth-border);
}
.auth-modal__tab {
flex: 1;
padding: 14px 12px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
font-family: var(--auth-font);
font-size: 0.88rem;
font-weight: 600;
color: var(--auth-text-muted);
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.auth-modal__tab:hover {
color: var(--auth-primary);
}
.auth-modal__tab--active {
color: var(--auth-primary);
border-bottom-color: var(--auth-primary);
}
/* Panneaux */
.auth-modal__content {
padding: 0;
}
.auth-modal__panel {
padding: 24px 28px 28px;
}
/* Loader */
.auth-modal__loader {
display: flex;
align-items: center;
gap: 10px;
color: var(--auth-text-muted);
font-size: 0.85rem;
font-family: var(--auth-font);
justify-content: center;
padding: 20px 0;
}
.auth-spinner {
width: 18px;
height: 18px;
animation: auth-spin 0.8s linear infinite;
color: var(--auth-primary);
flex-shrink: 0;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
/* Erreur de chargement */
.auth-modal__error {
font-family: var(--auth-font);
font-size: 0.85rem;
color: #c0392b;
text-align: center;
padding: 12px 0;
}
.auth-modal__error a {
color: var(--auth-secondary);
}
/* --------------------------------------------------------------------------
Formulaires wpForo injectés dans la modale — charte Tanika
-------------------------------------------------------------------------- */
/* Masquer éléments parasites */
.auth-modal__form-wrap #wpforo-title,
.auth-modal__form-wrap p#wpforo-title,
.auth-modal__form-wrap h3,
.auth-modal__form-wrap .wpforo-login-wrap > .wpforo-login-content > h3,
.auth-modal__form-wrap .wpforo-register-wrap > .wpforo-register-content > h3,
.auth-modal__form-wrap .wpf-extra-field-end,
.auth-modal__form-wrap .fas.fa-user.wpf-field-icon,
.auth-modal__form-wrap .fas.fa-envelope.wpf-field-icon,
.auth-modal__form-wrap .fas.fa-key.wpf-field-icon,
.auth-modal__form-wrap .wpf-field-reg,
.auth-modal__form-wrap .wpf-field-login {
display: none !important;
}
/* Wrapper transparent */
.auth-modal__form-wrap .wpforo-login-wrap,
.auth-modal__form-wrap .wpforo-register-wrap {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.auth-modal__form-wrap .wpforo-login-content,
.auth-modal__form-wrap .wpforo-register-content {
background: transparent !important;
padding: 0 !important;
}
.auth-modal__form-wrap .wpforo-table,
.auth-modal__form-wrap .wpforo-register-table {
background: transparent !important;
}
/* Reset table → block */
.auth-modal__form-wrap .wpf-table,
.auth-modal__form-wrap .wpforo-table,
.auth-modal__form-wrap .wpforo-register-table,
.auth-modal__form-wrap .wpforo-login-table {
display: block !important;
width: 100% !important;
padding: 0 !important;
background: transparent !important;
}
.auth-modal__form-wrap .wpf-tr {
display: block !important;
margin-bottom: 12px !important;
clear: both !important;
}
.auth-modal__form-wrap .wpf-td {
display: block !important;
width: 100% !important;
padding: 0 !important;
float: none !important;
}
.auth-modal__form-wrap .wpf-cl { display: none !important; }
/* Chaque champ en colonne */
.auth-modal__form-wrap .wpf-field {
display: flex !important;
flex-direction: column !important;
margin-bottom: 12px !important;
background: transparent !important;
border: none !important;
}
/* Labels masqués dans la modale (placeholder suffit) */
.auth-modal__form-wrap .wpf-label-wrap { display: none !important; }
/* Wrap input — fond bleu clair, pas de border */
.auth-modal__form-wrap .wpf-field-wrap {
display: block !important;
position: relative !important;
width: 100% !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
margin: 0 !important;
}
/* Inputs — fond rgba bleu, texte bleu, pas de border */
.auth-modal__form-wrap .wpf-login-text,
.auth-modal__form-wrap input[type="text"],
.auth-modal__form-wrap input[type="email"],
.auth-modal__form-wrap input[type="password"] {
font-family: var(--auth-font) !important;
font-size: 16px !important;
font-weight: 400 !important;
color: var(--wpf-secondary) !important;
background: rgba(0, 155, 222, 0.1) !important;
border: none !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
padding: 14px 16px !important;
width: 100% !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: background 0.2s !important;
}
.auth-modal__form-wrap input[type="text"]::placeholder,
.auth-modal__form-wrap input[type="email"]::placeholder,
.auth-modal__form-wrap input[type="password"]::placeholder,
.auth-modal__form-wrap .wpf-login-text::placeholder {
color: var(--wpf-secondary) !important;
opacity: 0.6 !important;
}
.auth-modal__form-wrap input[type="text"]:focus,
.auth-modal__form-wrap input[type="email"]:focus,
.auth-modal__form-wrap input[type="password"]:focus,
.auth-modal__form-wrap .wpf-login-text:focus {
background: rgba(0, 155, 222, 0.15) !important;
box-shadow: 0 0 0 2px rgba(0, 155, 222, 0.3) !important;
}
/* Icône œil */
.auth-modal__form-wrap .wpf-show-password {
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--wpf-secondary) !important;
cursor: pointer !important;
font-size: 14px !important;
z-index: 2 !important;
}
/* Checkbox — carré F29BA1, coché = carré primary dedans */
.auth-modal__form-wrap input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
border: 3px solid var(--wpf-accent) !important;
border-radius: 0 !important;
flex-shrink: 0 !important;
cursor: pointer !important;
background: #fff !important;
position: relative !important;
margin: 0 !important;
top: 4px !important;
transition: background 0.15s !important;
}
.auth-modal__form-wrap input[type="checkbox"]:checked::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 10px !important;
height: 10px !important;
background: var(--wpf-primary) !important;
margin: 2px !important;
border-radius: 0 !important;
}
/* "Se souvenir de moi" + "Mot de passe perdu" */
.auth-modal__form-wrap .wpf-extra {
font-family: var(--auth-font) !important;
font-size: 13px !important;
color: var(--wpf-primary-dark) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 6px 10px !important;
margin: 0 0 12px !important;
padding: 0 !important;
text-align: center !important;
background: transparent !important;
border: none !important;
}
.auth-modal__form-wrap .wpf-extra label {
font-size: 13px !important;
color: var(--wpf-primary-dark) !important;
}
.auth-modal__form-wrap .wpf-forgot-pass {
font-family: var(--auth-font) !important;
font-size: 13px !important;
color: var(--wpf-secondary) !important;
text-decoration: none !important;
}
.auth-modal__form-wrap .wpf-forgot-pass:hover {
color: var(--wpf-primary) !important;
}
/* Zone actions */
.auth-modal__form-wrap .wpf-field-type-submit {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
padding-top: 20px !important;
margin-top: 8px !important;
border-top: 1px solid rgba(0, 155, 222, 0.15) !important;
background: transparent !important;
}
/* Bouton submit — accent jaune */
.auth-modal__form-wrap input[type="submit"] {
font-family: var(--auth-font) !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--wpf-primary-dark) !important;
background: var(--wpf-accent) !important;
border: none !important;
border-radius: 0 !important;
padding: 14px 40px !important;
cursor: pointer !important;
transition: background 0.2s !important;
width: auto !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
margin: 0 !important;
}
.auth-modal__form-wrap input[type="submit"]:hover {
background: var(--wpf-accent-dark) !important;
}
/* Info message */
.auth-modal__form-wrap .wpf-reg-info {
color: var(--wpf-tertiary) !important;
font-size: 14px !important;
}
.auth-modal__form-wrap .wpf-td:has(.wpf-reg-info) {
font-family: var(--auth-font) !important;
font-size: 12px !important;
color: var(--wpf-primary-dark) !important;
opacity: 0.65 !important;
}
/* --------------------------------------------------------------------------
PAGES sign-in / sign-up — épuration du rendu pleine page
-------------------------------------------------------------------------- */
/* Masquer le menu wpForo complet sur ces pages */
body.wpft-login #wpforo-menu,
body.wpft-register #wpforo-menu {
display: none !important;
}
/* Masquer le titre "Forum - Connexion" / "Forum - abonnement" */
body.wpft-login #wpforo-title,
body.wpft-register #wpforo-title {
display: none !important;
}
/* Centrer et encadrer le formulaire sur la page */
body.wpft-login .wpforo-login-wrap,
body.wpft-register .wpforo-register-wrap {
max-width: 440px !important;
margin: 48px auto !important;
background: #ffffff !important;
border: 1px solid var(--auth-border) !important;
border-radius: 14px !important;
box-shadow: 0 8px 32px rgba(0, 90, 160, 0.1) !important;
overflow: hidden !important;
}
body.wpft-login .wpforo-login-content,
body.wpft-register .wpforo-register-content {
padding: 32px 32px 28px !important;
background: transparent !important;
}
/* Titre "Bienvenue !" / "Rejoignez-nous aujourd'hui !" */
body.wpft-login .wpforo-login-content h3,
body.wpft-register .wpforo-register-content h3 {
font-family: var(--auth-font) !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
color: var(--auth-primary) !important;
text-align: center !important;
margin-bottom: 24px !important;
}
/* Champs pleine page — même style que dans la modale */
body.wpft-login .wpf-field-wrap,
body.wpft-register .wpf-field-wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
background: var(--auth-bg) !important;
border: 1.5px solid var(--auth-border) !important;
border-radius: 8px !important;
margin-bottom: 12px !important;
transition: border-color 0.2s !important;
overflow: hidden !important;
}
body.wpft-login .wpf-field-wrap:focus-within,
body.wpft-register .wpf-field-wrap:focus-within {
border-color: var(--auth-secondary) !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(0, 155, 222, 0.1) !important;
}
body.wpft-login .wpf-field-icon,
body.wpft-register .wpf-field-icon {
padding: 0 12px !important;
color: var(--auth-text-muted) !important;
font-size: 0.85rem !important;
}
body.wpft-login .wpf-login-text,
body.wpft-login input[type="text"],
body.wpft-login input[type="password"],
body.wpft-register input[type="text"],
body.wpft-register input[type="email"],
body.wpft-register input[type="password"] {
font-family: var(--auth-font) !important;
font-size: 0.9rem !important;
color: var(--auth-text) !important;
background: transparent !important;
border: none !important;
outline: none !important;
padding: 11px 14px 11px 0 !important;
width: 100% !important;
}
body.wpft-login input[type="submit"],
body.wpft-register input[type="submit"] {
font-family: var(--auth-font) !important;
width: 100% !important;
padding: 12px 24px !important;
background: var(--auth-primary) !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: background 0.2s !important;
margin-bottom: 12px !important;
}
body.wpft-login input[type="submit"]:hover,
body.wpft-register input[type="submit"]:hover {
background: var(--auth-primary-dark) !important;
}
/* Se souvenir + mot de passe oublié */
body.wpft-login .wpf-extra {
font-family: var(--auth-font) !important;
font-size: 0.78rem !important;
color: var(--auth-text-muted) !important;
text-align: center !important;
}
body.wpft-login .wpf-forgot-pass {
color: var(--auth-secondary) !important;
text-decoration: none !important;
}
/* Lien "Créer un compte" / "Connexion" */
body.wpft-login .wpf-field-reg a,
body.wpft-register .wpf-field-login a {
font-family: var(--auth-font) !important;
font-size: 0.82rem !important;
color: var(--auth-secondary) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
}
body.wpft-login .wpf-field-reg a:hover,
body.wpft-register .wpf-field-login a:hover {
color: var(--auth-primary) !important;
}
/* Labels */
body.wpft-login .wpf-label,
body.wpft-register .wpf-label {
font-family: var(--auth-font) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--auth-text-muted) !important;
}
/* Description (ex: longueur min pseudo) */
body.wpft-register .wpf-desc {
font-size: 0.7rem !important;
color: var(--auth-text-muted) !important;
}
/* Espacement global */
body.wpft-login .wpforo-login-table,
body.wpft-register .wpforo-register-table {
background: transparent !important;
}
/* Responsive */
@media (max-width: 480px) {
.auth-modal__box {
border-radius: 10px;
}
.auth-modal__panel {
padding: 20px 18px 24px;
}
.auth-modal__header {
padding: 22px 18px 14px;
}
body.wpft-login .wpforo-login-content,
body.wpft-register .wpforo-register-content {
padding: 24px 20px 20px !important;
}
}
/* ---------- _wpforo-auth.css ---------- */
/* ==========================================================================
Auth Modal — Modale connexion/inscription + épuration pages wpForo
Fichier : resources/css/_auth-modal.css
========================================================================== */
/* --------------------------------------------------------------------------
Variables
-------------------------------------------------------------------------- */
.auth-modal,
#wpforo #wpforo-wrap .wpforo-login-wrap,
#wpforo #wpforo-wrap .wpforo-register-wrap {
--auth-primary: var(--wpf-primary);
--auth-primary-dark: var(--wpf-primary-dark);
--auth-secondary: var(--wpf-secondary);
--auth-border: #E2E8F0;
--auth-text: #0F1B4D;
--auth-text-muted: #6B7A99;
--auth-bg: #F4F6FB;
--auth-surface: #ffffff;
--auth-radius: 10px;
--auth-font: "Roboto", Inter, system-ui, sans-serif;
}
/* --------------------------------------------------------------------------
MODALE — Structure
-------------------------------------------------------------------------- */
.auth-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
font-family: var(--auth-font);
}
.auth-modal[hidden] { display: none; }
.auth-modal__overlay {
position: absolute;
inset: 0;
background: rgba(7, 23, 119, 0.55);
backdrop-filter: blur(3px);
cursor: pointer;
}
.auth-modal__box {
position: relative;
background: var(--auth-surface);
border-radius: 14px;
width: 100%;
max-width: 460px;
max-height: 92vh;
overflow-y: auto;
box-shadow: 0 24px 60px rgba(7, 23, 119, 0.22);
z-index: 1;
animation: auth-modal-in 0.22s ease;
}
@keyframes auth-modal-in {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Bouton fermer */
.auth-modal__close {
position: absolute;
top: 14px;
right: 14px;
background: transparent;
border: none;
cursor: pointer;
padding: 6px;
color: var(--auth-text-muted);
border-radius: 6px;
transition: color 0.15s, background 0.15s;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.auth-modal__close:hover {
color: var(--auth-primary);
background: var(--auth-bg);
}
.auth-modal__close svg { fill: currentColor; }
/* En-tête */
.auth-modal__header {
padding: 28px 28px 16px;
text-align: center;
border-bottom: 1px solid var(--auth-border);
}
.auth-modal__titre {
font-family: var(--auth-font);
font-size: 1.15rem;
font-weight: 700;
color: var(--auth-primary);
margin: 0 0 6px;
padding-right: 28px;
}
.auth-modal__subtitle {
font-family: var(--auth-font);
font-size: 0.85rem;
color: var(--auth-text-muted);
margin: 0;
line-height: 1.5;
}
/* Onglets */
.auth-modal__tabs {
display: flex;
border-bottom: 2px solid var(--auth-border);
}
.auth-modal__tab {
flex: 1;
padding: 14px 12px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
font-family: var(--auth-font);
font-size: 0.88rem;
font-weight: 600;
color: var(--auth-text-muted);
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.auth-modal__tab:hover {
color: var(--auth-primary);
}
.auth-modal__tab--active {
color: var(--auth-primary);
border-bottom-color: var(--auth-primary);
}
/* Panneaux */
.auth-modal__content {
padding: 0;
}
.auth-modal__panel {
padding: 24px 28px 28px;
}
/* Loader */
.auth-modal__loader {
display: flex;
align-items: center;
gap: 10px;
color: var(--auth-text-muted);
font-size: 0.85rem;
font-family: var(--auth-font);
justify-content: center;
padding: 20px 0;
}
.auth-spinner {
width: 18px;
height: 18px;
animation: auth-spin 0.8s linear infinite;
color: var(--auth-primary);
flex-shrink: 0;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
/* Erreur de chargement */
.auth-modal__error {
font-family: var(--auth-font);
font-size: 0.85rem;
color: #c0392b;
text-align: center;
padding: 12px 0;
}
.auth-modal__error a {
color: var(--auth-secondary);
}
/* --------------------------------------------------------------------------
Formulaires wpForo injectés dans la modale
-------------------------------------------------------------------------- */
/* Masquer les éléments parasites des pages wpForo dans la modale */
.auth-modal__form-wrap #wpforo-title,
.auth-modal__form-wrap p#wpforo-title,
.auth-modal__form-wrap h3,
.auth-modal__form-wrap .wpforo-login-wrap > .wpforo-login-content > h3,
.auth-modal__form-wrap .wpforo-register-wrap > .wpforo-register-content > h3 {
display: none !important;
}
/* Conteneur formulaire wpForo — fond transparent dans la modale */
.auth-modal__form-wrap .wpforo-login-wrap,
.auth-modal__form-wrap .wpforo-register-wrap {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.auth-modal__form-wrap .wpforo-login-content,
.auth-modal__form-wrap .wpforo-register-content {
background: transparent !important;
padding: 0 !important;
}
.auth-modal__form-wrap .wpforo-table,
.auth-modal__form-wrap .wpforo-register-table {
background: transparent !important;
}
/* Champs de saisie */
.auth-modal__form-wrap .wpf-field-wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
background: var(--auth-bg) !important;
border: 1.5px solid var(--auth-border) !important;
border-radius: 8px !important;
margin-bottom: 12px !important;
transition: border-color 0.2s !important;
overflow: hidden !important;
}
.auth-modal__form-wrap .wpf-field-wrap:focus-within {
border-color: var(--auth-secondary) !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(0, 155, 222, 0.1) !important;
}
.auth-modal__form-wrap .wpf-field-icon {
padding: 0 12px !important;
color: var(--auth-text-muted) !important;
font-size: 0.85rem !important;
flex-shrink: 0 !important;
}
.auth-modal__form-wrap .wpf-login-text,
.auth-modal__form-wrap input[type="text"],
.auth-modal__form-wrap input[type="email"],
.auth-modal__form-wrap input[type="password"] {
font-family: var(--auth-font) !important;
font-size: 0.9rem !important;
color: var(--auth-text) !important;
background: transparent !important;
border: none !important;
outline: none !important;
padding: 11px 14px 11px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Icône toggle password */
.auth-modal__form-wrap .wpf-show-password {
padding: 0 12px !important;
color: var(--auth-text-muted) !important;
cursor: pointer !important;
font-size: 0.85rem !important;
flex-shrink: 0 !important;
transition: color 0.15s !important;
}
.auth-modal__form-wrap .wpf-show-password:hover {
color: var(--auth-primary) !important;
}
/* Labels wpForo */
.auth-modal__form-wrap .wpf-label {
font-family: var(--auth-font) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--auth-text-muted) !important;
margin-bottom: 4px !important;
display: block !important;
}
.auth-modal__form-wrap .wpf-desc {
font-size: 0.72rem !important;
color: var(--auth-text-muted) !important;
margin-bottom: 6px !important;
}
.auth-modal__form-wrap .wpf-field-required-icon {
color: var(--auth-primary) !important;
}
/* Case "Se souvenir de moi" + lien mot de passe oublié */
.auth-modal__form-wrap .wpf-extra {
font-family: var(--auth-font) !important;
font-size: 0.78rem !important;
color: var(--auth-text-muted) !important;
text-align: center !important;
margin-bottom: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.auth-modal__form-wrap .wpf-forgot-pass {
color: var(--auth-secondary) !important;
font-size: 0.78rem !important;
text-decoration: none !important;
}
.auth-modal__form-wrap .wpf-forgot-pass:hover {
color: var(--auth-primary) !important;
}
/* Bouton submit */
.auth-modal__form-wrap input[type="submit"] {
font-family: var(--auth-font) !important;
width: 100% !important;
padding: 12px 24px !important;
background: var(--auth-primary) !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: background 0.2s !important;
margin-bottom: 12px !important;
}
.auth-modal__form-wrap input[type="submit"]:hover {
background: var(--auth-primary-dark) !important;
}
/* Lien "Créer un compte" / "Connexion" en bas du formulaire */
.auth-modal__form-wrap .wpf-field-reg,
.auth-modal__form-wrap .wpf-field-login {
text-align: center !important;
font-size: 0.82rem !important;
font-family: var(--auth-font) !important;
color: var(--auth-text-muted) !important;
margin-top: 4px !important;
}
/* On masque ces liens dans la modale car les onglets jouent ce rôle */
.auth-modal__form-wrap .wpf-field-reg,
.auth-modal__form-wrap .wpf-field-login {
display: none !important;
}
/* --------------------------------------------------------------------------
PAGES sign-in / sign-up — épuration du rendu pleine page
-------------------------------------------------------------------------- */
/* Masquer le menu wpForo complet sur ces pages */
body.wpft-login #wpforo-menu,
body.wpft-register #wpforo-menu {
display: none !important;
}
/* Masquer le titre "Forum - Connexion" / "Forum - abonnement" */
body.wpft-login #wpforo-title,
body.wpft-register #wpforo-title {
display: none !important;
}
/* Centrer et encadrer le formulaire sur la page */
body.wpft-login .wpforo-login-wrap,
body.wpft-register .wpforo-register-wrap {
max-width: 440px !important;
margin: 48px auto !important;
background: #ffffff !important;
border: 1px solid var(--auth-border) !important;
border-radius: 14px !important;
box-shadow: 0 8px 32px rgba(0, 90, 160, 0.1) !important;
overflow: hidden !important;
}
body.wpft-login .wpforo-login-content,
body.wpft-register .wpforo-register-content {
padding: 32px 32px 28px !important;
background: transparent !important;
}
/* Titre "Bienvenue !" / "Rejoignez-nous aujourd'hui !" */
body.wpft-login .wpforo-login-content h3,
body.wpft-register .wpforo-register-content h3 {
font-family: var(--auth-font) !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
color: var(--auth-primary) !important;
text-align: center !important;
margin-bottom: 24px !important;
}
/* Champs pleine page — même style que dans la modale */
body.wpft-login .wpf-field-wrap,
body.wpft-register .wpf-field-wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
background: var(--auth-bg) !important;
border: 1.5px solid var(--auth-border) !important;
border-radius: 8px !important;
margin-bottom: 12px !important;
transition: border-color 0.2s !important;
overflow: hidden !important;
}
body.wpft-login .wpf-field-wrap:focus-within,
body.wpft-register .wpf-field-wrap:focus-within {
border-color: var(--auth-secondary) !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(0, 155, 222, 0.1) !important;
}
body.wpft-login .wpf-field-icon,
body.wpft-register .wpf-field-icon {
padding: 0 12px !important;
color: var(--auth-text-muted) !important;
font-size: 0.85rem !important;
}
body.wpft-login .wpf-login-text,
body.wpft-login input[type="text"],
body.wpft-login input[type="password"],
body.wpft-register input[type="text"],
body.wpft-register input[type="email"],
body.wpft-register input[type="password"] {
font-family: var(--auth-font) !important;
font-size: 0.9rem !important;
color: var(--auth-text) !important;
background: transparent !important;
border: none !important;
outline: none !important;
padding: 11px 14px 11px 0 !important;
width: 100% !important;
}
body.wpft-login input[type="submit"],
body.wpft-register input[type="submit"] {
font-family: var(--auth-font) !important;
width: 100% !important;
padding: 12px 24px !important;
background: var(--auth-primary) !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: background 0.2s !important;
margin-bottom: 12px !important;
}
body.wpft-login input[type="submit"]:hover,
body.wpft-register input[type="submit"]:hover {
background: var(--auth-primary-dark) !important;
}
/* Se souvenir + mot de passe oublié */
body.wpft-login .wpf-extra {
font-family: var(--auth-font) !important;
font-size: 0.78rem !important;
color: var(--auth-text-muted) !important;
text-align: center !important;
}
body.wpft-login .wpf-forgot-pass {
color: var(--auth-secondary) !important;
text-decoration: none !important;
}
/* Lien "Créer un compte" / "Connexion" */
body.wpft-login .wpf-field-reg a,
body.wpft-register .wpf-field-login a {
font-family: var(--auth-font) !important;
font-size: 0.82rem !important;
color: var(--auth-secondary) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
}
body.wpft-login .wpf-field-reg a:hover,
body.wpft-register .wpf-field-login a:hover {
color: var(--auth-primary) !important;
}
/* Labels */
body.wpft-login .wpf-label,
body.wpft-register .wpf-label {
font-family: var(--auth-font) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--auth-text-muted) !important;
}
/* Description (ex: longueur min pseudo) */
body.wpft-register .wpf-desc {
font-size: 0.7rem !important;
color: var(--auth-text-muted) !important;
}
/* Espacement global */
body.wpft-login .wpforo-login-table,
body.wpft-register .wpforo-register-table {
background: transparent !important;
}
/* Responsive */
@media (max-width: 480px) {
.auth-modal__box {
border-radius: 10px;
}
.auth-modal__panel {
padding: 20px 18px 24px;
}
.auth-modal__header {
padding: 22px 18px 14px;
}
body.wpft-login .wpforo-login-content,
body.wpft-register .wpforo-register-content {
padding: 24px 20px 20px !important;
}
}
/* Masquer : Forums, Members, Recent Posts, Logout */
#wpforo #wpforo-wrap #wpf-menu .wpforo-home,
#wpforo #wpforo-wrap #wpf-menu .wpforo-members,
#wpforo #wpforo-wrap #wpf-menu .wpforo-recent {
display: none !important;
}
/* Dans le sous-menu profil, masquer Activity et Subscriptions */
#wpforo #wpforo-wrap #wpf-menu .wpforo-profile-activity,
#wpforo #wpforo-wrap #wpf-menu .wpforo-profile-subscriptions {
display: none !important;
}
.wpforo-profile-menu,
.wpforo-user-tools .wpf-ab-edit_dash {
display: none !important;
}