@charset "UTF-8";
/* =====================================================================
MU RECRUTEMENT DE PROFESSEURS — HABILLAGE
---------------------------------------------------------------------
Feuille unique, chargée sous le handle `mu-recrutement`.
Le balisage stylé ici est produit par mu-plugins/mu-recrutement.php ;
la liste exhaustive des classes se trouve dans le récapitulatif en fin
de ce fichier PHP. Aucune classe n'est inventée : chacune a été relue
dans le code qui l'émet.
Le fichier est coupé en DEUX parties nettement séparées :
PARTIE A — CÔTÉ PUBLIC (pages d'appel, formulaire, merci)
PARTIE B — CÔTÉ ADMINISTRATION (rubrique « Recrutement »)
=====================================================================
TROIS PIÈGES DE CE SITE, À NE JAMAIS RÉOUVRIR
=====================================================================
1. LE KIT ELEMENTOR REPEINT TOUS LES BOUTONS ET TOUS LES LIENS.
uploads/elementor/css/post-1690.css contient, en (0,1,1) :
.elementor-kit-1690 button { background-color: #F24080 (rose,
HORS PALETTE); color; padding: 16px 28px; border-radius: 25px;
border-style; border-width; font-family; font-size;
font-weight; line-height }
.elementor-kit-1690 a { color }
.elementor a { box-shadow: none }
La classe `elementor-kit-1690` vit sur le : tout notre
contenu public en hérite. Une règle en (0,1,0) — une seule classe —
PERD. D'où la règle de conduite appliquée partout ci-dessous :
· DEUX classes au minimum dans le sélecteur, soit (0,2,0), qui
l'emporte sur (0,1,1) ;
· `!important` UNIQUEMENT sur les propriétés que le kit dispute
réellement, et sur aucune autre. Chaque `!important` de cette
feuille répond à une déclaration précise citée ci-dessus. Aucun
n'est posé par confort.
Les champs de formulaire, eux, ne sont stylés par le thème qu'au
niveau élément — `input[type=email]…` en (0,1,1), `input` en
(0,0,1). Nos sélecteurs `.mu-rec-form .mu-rec-input` sont en (0,2,0)
et gagnent SANS `!important` : on n'en met donc pas.
2. `font-family: 'Tajawal', inherit` EST DU CSS INVALIDE.
`inherit` ne peut pas figurer dans une liste de polices : le
navigateur jette la déclaration ENTIÈRE, silencieusement. D'où la
pile complète de --mu-police, avec Tajawal EN PREMIER : Poppins n'a
aucun glyphe arabe, et les contenus de ce site sont souvent en
arabe.
3. LE THÈME CASSE `.screen-reader-text`.
themes/histudy/assets/css/style.css déclare d'abord le masquage
correct (clip), puis, plus bas, `.screen-reader-text{display:none}`
en (0,1,0) — qui gagne par ordre de source et retire le texte AUX
LECTEURS D'ÉCRAN AUSSI. Or le PHP s'en sert pour doubler
l'astérisque « (obligatoire) ». On rétablit le masquage visuel
correct en (0,2,0), plus bas dans la partie A.
=====================================================================
CONCEPTION FAIL-OPEN — RÈGLE ABSOLUE DE CETTE FEUILLE
=====================================================================
Aucune règle de ce fichier ne masque un contenu en attendant que du
JavaScript le révèle. Il n'existe ici NI `opacity:0` de départ sur du
texte, NI `display:none` conditionné à une classe posée par un script.
Conséquences vérifiables, script absent ou en erreur :
· toutes les pages restent lisibles et complètes ;
· le champ CV reste un pleinement utilisable —
il est superposé à la zone de dépôt par la grille CSS, donc le
clic ET le glisser-déposer natifs du navigateur fonctionnent sans
une ligne de JavaScript ;
· le formulaire reste soumettable, et `required` / `type="email"`
assurent la validation par le navigateur ;
· les conteneurs Lottie restent de hauteur nulle : pas de trou blanc
là où l'animation n'a pas pu se charger.
===================================================================== */
/* =====================================================================
██ PARTIE A — CÔTÉ PUBLIC
=====================================================================
Pages d'appel à candidature, formulaire, confirmation, et bloc de
remplacement de l'inscription formateur de Tutor.
===================================================================== */
/* ---------------------------------------------------------------------
A0. Variables et remise à zéro locale
---------------------------------------------------------------------
Les variables sont posées sur `.mu-rec` et non sur `:root` : la
feuille ne doit rien imposer au reste du site. Si le module est
désinstallé, il ne laisse aucune trace de cascade.
`box-sizing` est redéclaré localement pour la même raison : certains
gabarits Elementor le remettent à `content-box` sur des sous-arbres.
--------------------------------------------------------------------- */
.mu-rec {
--mu-violet-fonce: #41246D;
--mu-violet: #6E35C3;
--mu-violet-clair: #BC8FFF;
--mu-violet-actif: #8943F3;
--mu-orange: #FF9616;
/* Nuances de service, dérivées de la palette et non inventées :
elles ne servent qu'aux fonds, traits et ombres. */
--mu-trait: #EDE7F8;
--mu-trait-fort: #DCCFF6;
--mu-fond-doux: #F8F5FF;
--mu-fond-carte: #FFFFFF;
--mu-texte: #4A4258;
--mu-texte-discret: #7A7188;
--mu-ombre-douce: 0 10px 30px rgba(110, 53, 195, .08);
--mu-ombre-carte: 0 24px 70px rgba(65, 36, 109, .10);
--mu-ombre-focus: 0 0 0 4px rgba(137, 67, 243, .16);
--mu-rayon: 16px;
--mu-rayon-carte: 26px;
/* Courbe unique du module : une décélération franche, jamais
élastique. Elle donne la même « signature » à toutes les
transitions, ce qui est ce qui fait qu'un habillage paraît
dessiné plutôt que bricolé. */
--mu-courbe: cubic-bezier(.22, 1, .36, 1);
/* Pile COMPLÈTE, Tajawal en premier (voir piège n° 2 en tête). */
--mu-police: 'Tajawal', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
box-sizing: border-box;
font-family: var(--mu-police);
color: var(--mu-texte);
}
.mu-rec *,
.mu-rec *::before,
.mu-rec *::after { box-sizing: border-box; }
/* Rétablit le masquage visuel accessible, cassé par le thème (piège
n° 3). (0,2,0) l'emporte sur le `.screen-reader-text{display:none}`
du thème, en (0,1,0). Sans cette règle, la mention « (obligatoire) »
n'est plus annoncée par les lecteurs d'écran. */
.mu-rec .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
display: inline !important;
}
/* ---------------------------------------------------------------------
A1. Racine et conteneur
---------------------------------------------------------------------
La lueur violette en fond est peinte par un dégradé radial sur le
pseudo-élément, jamais par une image : rien à téléverser, rien à
mettre en cache, et la couleur suit la palette si elle change.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
RATTRAPAGE DE LA MISE EN PAGE DU THÈME — 8 août 2026
---------------------------------------------------------------------
Constaté à l'inspecteur sur /devenir-professeur/ : 120 px de vide en
haut ET en bas, contenu collé aux bords, angles vifs.
DEUX CAUSES DISTINCTES, et il fallait les séparer pour les corriger.
1. LE VIDE VERTICAL vient du thème : `.rbt-page-area` réserve
`padding: 120px 0` pour ses pages d'accueil illustrées. Sur une
page de contenu, cela fait 240 px de blanc autour de trois
paragraphes.
2. LES BORDS COLLÉS viennent de `histudy-child/css/auth-pages.css` :
main.main-page-wrapper,
.rbt-page-area.rbt-section-gap {
padding-left: 0 !important; margin-left: 0 !important;
width: 100% !important;
}
Écrite pour les pages de connexion, mais `mu_enqueue_auth_pages_css()`
(functions.php:742) n'a AUCUNE condition de page : la feuille se
charge sur tout le site.
Ces deux règles portent sur des ANCÊTRES de notre conteneur — CSS ne
remonte pas. D'où la classe `mu-rec-page`, posée sur par
mu_recrut_classe_body(), qui donne enfin un point d'accroche.
Portée strictement limitée à nos trois pages : le reste du site n'est
pas touché. Le vrai correctif — conditionner auth-pages.css — reste à
faire, et il dépasse ce module.
--------------------------------------------------------------------- */
body.mu-rec-page .rbt-page-area,
body.mu-rec-page .rbt-page-area.rbt-section-gap {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
}
/* ESPACE AVANT LE PIED DE PAGE — valeurs reprises du thème, pas choisies.
*
* 120px = `.rbt-section-gapBottom` / `.rbt-section-gap` du thème Histudy,
* c'est-à-dire l'espace que le thème met lui-même entre la
* dernière section et le pied de page sur archive.php, single.php,
* index.php et les gabarits d'archive.
* 60px = `.rbt-section-gapTopHalf` et `.footer-style-1 .footer-top` sous
* 768px. Aucun nombre inventé de part et d'autre.
*
* La pente 10vw reproduit la marche 80 → 120px du thème (elle vaut 77px à
* 768px, franchit 99px à 992px où le thème saute de 80 à 120, et rejoint
* exactement 120px à partir de 1200px) au lieu de la trancher.
*
* PAS DE DOUBLE ESPACE, vérifié deux fois : (a) l'ancêtre
* `.rbt-page-area.rbt-section-gap`, seul porteur d'un rembourrage bas, est
* déjà neutralisé plus haut dans ce fichier pour `body.mu-rec-page` ;
* (b) le pied de page n'apporte aucun blanc au-dessus de son bord visible —
* sa règle `.footer-style-1 .footer-top{padding-top:80px}` (0,2,0) est
* battue par `footer.rbt-footer.footer-style-1:not(.has-elementor-full-width)
* > .footer-top{padding-top:0}` (0,3,1), et ces 80px sont relogés DANS le
* `.container`, sous le filet supérieur. L'espace vu est donc bien le nôtre,
* sans abattement.
*
* NE PAS retirer le `padding-bottom:0 !important` posé plus haut sur
* l'ancêtre pour « rétablir » l'espace : cumulé à celui-ci, cela donnerait
* 240px sur grand écran. L'espace doit être porté par `.mu-rec` seul. */
.mu-rec {
position: relative;
padding: clamp(28px, 5vw, 64px) 0 clamp(60px, 10vw, 120px);
line-height: 1.85;
font-size: clamp(15px, 1.6vw, 17px);
}
/* Les angles vifs : le bloc touchait les bords de l'écran, donc ses
coins arrondis n'avaient nulle part où se voir. Une fois le
rembourrage latéral rétabli, ils réapparaissent — on les affirme ici
pour ne pas dépendre d'un héritage. */
.mu-rec .mu-rec-etat,
.mu-rec .mu-rec-appel-texte,
.mu-rec .mu-rec-encart {
border-radius: 16px;
}
/* FOND DÉCORATIF — `fixed`, et non `absolute`.
*
* En `absolute`, ce voile épouse `.mu-rec`, dont la largeur dépend d'une
* chaîne d'ancêtres que `histudy-child/css/auth-pages.css` dérègle
* (`width:100% !important` + `margin-left:0 !important`, chargés sur tout
* le site). Résultat : le bloc n'est ni centré ni pleine largeur, et le
* halo orangé s'arrêtait avant le bord droit.
*
* `position: fixed` + `inset: 0` = exactement le cadre visible, quelle que
* soit la largeur des parents. Le voile touche donc les quatre bords, sans
* `100vw` — ce qui évite la barre de défilement horizontale que `100vw`
* provoque sous Windows (100vw inclut la largeur de l'ascenseur).
*
* RÉSERVE : un ancêtre portant `transform`, `filter` ou `will-change`
* deviendrait le bloc conteneur et annulerait ce raisonnement. Aucun n'en
* porte aujourd'hui sur ces trois pages ; à revérifier si le thème change.
*
* Un troisième halo est ajouté en bas à GAUCHE : le fond était asymétrique
* (violet en haut au centre, orangé en bas à droite, rien à gauche). */
.mu-rec::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(60% 55% at 50% 0%, rgba(188, 143, 255, .18), transparent 70%),
radial-gradient(50% 45% at 100% 100%, rgba(255, 150, 22, .10), transparent 70%),
radial-gradient(50% 45% at 0% 100%, rgba(188, 143, 255, .10), transparent 70%);
}
.mu-rec .mu-rec-conteneur {
position: relative;
z-index: 1;
box-sizing: border-box;
width: 100%;
max-width: 940px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 28px);
}
/* La page d'appel et la confirmation sont centrées ; le formulaire, non :
un formulaire centré se lit mal, l'œil perd le début des étiquettes. */
.mu-rec.mu-rec-appel .mu-rec-conteneur,
.mu-rec.mu-rec-merci .mu-rec-conteneur,
.mu-rec.mu-rec-redirection .mu-rec-conteneur { text-align: center; }
.mu-rec.mu-rec-merci .mu-rec-conteneur,
.mu-rec.mu-rec-redirection .mu-rec-conteneur { max-width: 720px; }
/* ---------------------------------------------------------------------
A2. Conteneurs Lottie
---------------------------------------------------------------------
FAIL-OPEN, point le plus important de ce bloc : par défaut le
conteneur a une hauteur NULLE. Sans lottie-web — bibliothèque absente,
script bloqué, JSON introuvable — il n'occupe rien du tout et la page
se referme proprement sur le texte. Aucun trou blanc, aucune réserve
d'espace vide.
C'est le script qui pose `.is-anim` juste avant de lancer l'animation,
et qui la retire si le chargement échoue (événement `data_failed`).
La hauteur n'est donc donnée QUE lorsqu'il y a réellement quelque
chose à montrer.
--------------------------------------------------------------------- */
.mu-rec .mu-rec-lottie {
height: 0;
overflow: hidden;
margin: 0 auto;
width: 100%;
max-width: 480px;
/* Empêche tout héritage de fond ou de bordure venu d'un gabarit
Elementor sur les
génériques. */
background: none;
border: 0;
}
.mu-rec .mu-rec-lottie.is-anim {
height: clamp(190px, 30vw, 330px);
margin-bottom: clamp(8px, 2vw, 20px);
}
/* L'animation du formulaire sert de bandeau : plus discrète, elle ne
doit pas repousser les champs sous la ligne de flottaison. */
/* Agrandie à la demande. Les trois valeurs montent ensemble pour que le
cadrage reste identique du mobile au grand écran ; seule la borne basse
reste modérée, sinon l'animation mangerait tout l'écran d'un téléphone. */
.mu-rec .mu-rec-lottie--formulaire.is-anim {
height: clamp(180px, 27vw, 300px);
max-width: 460px;
}
.mu-rec .mu-rec-lottie svg {
display: block;
width: 100%;
height: 100%;
}
/* ---------------------------------------------------------------------
A3. Typographie
---------------------------------------------------------------------
Les tailles sont en clamp() : une seule déclaration couvre du
téléphone au grand écran, sans point de rupture à maintenir.
--------------------------------------------------------------------- */
.mu-rec .mu-rec-titre {
margin: 0 0 clamp(12px, 2vw, 18px);
font-family: var(--mu-police);
font-size: clamp(26px, 4.2vw, 42px);
font-weight: 800;
line-height: 1.25;
letter-spacing: -.015em;
color: var(--mu-violet-fonce);
}
/* Filet dégradé sous le titre principal. Décoratif : il disparaît sans
conséquence si le navigateur ignore ::after. */
.mu-rec .mu-rec-titre::after {
content: "";
display: block;
width: 72px;
height: 4px;
margin-top: 16px;
border-radius: 999px;
background: linear-gradient(90deg, var(--mu-violet-actif), var(--mu-orange));
}
.mu-rec.mu-rec-appel .mu-rec-titre::after,
.mu-rec.mu-rec-merci .mu-rec-titre::after,
.mu-rec.mu-rec-redirection .mu-rec-titre::after { margin-inline: auto; }
/* Variante à l'intérieur d'un bloc d'état : plus sobre, sans filet — le
bloc porte déjà sa propre identité visuelle. */
.mu-rec .mu-rec-titre--etat {
font-size: clamp(20px, 2.8vw, 27px);
margin-bottom: 10px;
}
.mu-rec .mu-rec-titre--etat::after { display: none; }
.mu-rec .mu-rec-chapo {
margin: 0 0 18px;
font-size: clamp(16px, 1.9vw, 19px);
line-height: 1.85;
color: var(--mu-texte);
font-weight: 500;
}
.mu-rec .mu-rec-texte {
margin: 0 0 16px;
line-height: 1.9;
color: var(--mu-texte);
}
.mu-rec .mu-rec-texte--discret {
font-size: .94em;
color: var(--mu-texte-discret);
}
/* Le bloc de texte de la page d'appel : une largeur de lecture
confortable, jamais toute la largeur de l'écran. */
.mu-rec .mu-rec-appel-texte {
max-width: 720px;
margin-inline: auto;
}
/* ---- La liste des atouts ------------------------------------------
Les puces natives sont remplacées par une pastille dessinée en CSS
(un cercle dégradé + une coche tracée avec deux bordures). Aucune
police d'icônes n'est requise : la liste reste lisible même si le
thème ne chargeait pas Feather. */
.mu-rec .mu-rec-atouts {
list-style: none;
margin: 24px 0 26px;
padding: 0;
display: grid;
gap: 14px;
text-align: start;
}
.mu-rec .mu-rec-atout {
position: relative;
margin: 0;
/* `padding-inline-start` et non `padding-left` : le site sert aussi
des contenus en arabe, la pastille doit suivre le sens de lecture. */
padding: 16px 20px;
padding-inline-start: 60px;
background: var(--mu-fond-carte);
border: 1px solid var(--mu-trait);
border-radius: var(--mu-rayon);
box-shadow: var(--mu-ombre-douce);
line-height: 1.75;
color: var(--mu-texte);
transition: transform .35s var(--mu-courbe),
box-shadow .35s var(--mu-courbe),
border-color .3s ease;
}
.mu-rec .mu-rec-atout:hover {
transform: translateY(-3px);
border-color: var(--mu-trait-fort);
box-shadow: 0 18px 44px rgba(110, 53, 195, .14);
}
/* Pastille */
.mu-rec .mu-rec-atout::before {
content: "";
position: absolute;
inset-inline-start: 18px;
top: 50%;
width: 28px;
height: 28px;
margin-top: -14px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mu-violet-actif), var(--mu-violet));
}
/* Coche : deux bordures d'un rectangle vide, pivotées de 45°. */
.mu-rec .mu-rec-atout::after {
content: "";
position: absolute;
inset-inline-start: 29px;
top: 50%;
width: 6px;
height: 11px;
margin-top: -8px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
/* ---- Lien inline ---------------------------------------------------
`.elementor-kit-1690 a` (0,1,1) impose sa couleur à tous les liens, et
`.elementor a{box-shadow:none}` (0,1,1) supprime l'ombre. Notre
sélecteur est en (0,2,0), donc gagnant ; le `!important` sur `color`
est la ceinture qui nous protège d'une régénération du kit Elementor
avec une spécificité plus forte — c'est la seule propriété disputée
ici, aucune autre n'en porte. */
.mu-rec .mu-rec-lien {
color: var(--mu-violet) !important;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
font-weight: 600;
transition: color .25s ease;
}
.mu-rec .mu-rec-lien:hover,
.mu-rec .mu-rec-lien:focus {
color: var(--mu-orange) !important;
text-decoration-thickness: 2px;
}
.mu-rec .mu-rec-lien:focus-visible {
outline: 3px solid var(--mu-violet-actif);
outline-offset: 3px;
border-radius: 4px;
}
/* ---- Mention légale sous le bouton d'envoi ------------------------- */
.mu-rec .mu-rec-mention {
margin: 18px 0 0;
font-size: 13.5px;
line-height: 1.75;
color: var(--mu-texte-discret);
text-align: center;
}
/* ---- Avis réservé aux administrateurs ------------------------------
Volontairement voyant : il ne s'affiche que pour `manage_options`, et
il signale une page mal configurée. Un avis discret serait ignoré. */
.mu-rec .mu-rec-avis-admin {
margin: 18px auto 0;
max-width: 640px;
padding: 14px 18px;
border: 2px dashed var(--mu-orange);
border-radius: 14px;
background: #FFF8EE;
color: #7A4A00;
font-size: 14px;
line-height: 1.7;
text-align: start;
}
/* ---------------------------------------------------------------------
A4. Boutons
---------------------------------------------------------------------
Le balisage porte TOUJOURS `rbt-btn btn-border icon-hover` en plus de
`.mu-rec-bouton`, avec la structure interne +
.
Vérifications faites dans le code réel :
· `.feather-arrow-right:before{content:"\e912"}` existe bien dans
themes/histudy/assets/css/plugins/feather.css, et cette feuille est
mise en file sans condition (inc/scripts.php:216) ;
· le comportement `icon-hover` du thème est défini en (0,2,0)
(`.rbt-btn.icon-hover .btn-text`, `.rbt-btn:hover.icon-hover …`).
POURQUOI ON REDÉCLARE CE COMPORTEMENT ICI, à l'identique et en
(0,3,0) : le module doit tenir seul. Si le thème change, si la feuille
du thème est retirée d'une page, le bouton doit garder son animation.
Les valeurs sont copiées telles quelles (7 px, cubic-bezier(0,.71,.4,1),
.5s / .25s) : l'apparence est rigoureusement la même, seule
l'autonomie change.
Les classes de COMPORTEMENT du modèle d'origine — ajax-buy-now-product,
product-simple, tutor-open-login-modal — ne sont volontairement pas
reprises par le PHP : elles déclenchent l'ajout au panier et la fenêtre
de connexion, abandonnée sur ce site. Rien ici ne les réintroduit.
--------------------------------------------------------------------- */
.mu-rec .mu-rec-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: clamp(20px, 3vw, 32px) 0 0;
padding: 0;
}
.mu-rec.mu-rec-appel .mu-rec-actions,
.mu-rec.mu-rec-merci .mu-rec-actions,
.mu-rec.mu-rec-redirection .mu-rec-actions { justify-content: center; }
.mu-rec.mu-rec-formulaire .mu-rec-actions { justify-content: flex-start; }
/*
* Le bouton lui-même.
*
* CHAQUE `!important` ci-dessous répond à une déclaration précise de
* `.elementor-kit-1690 button` (0,1,1), citée en tête de fichier :
* background-color / background-image → le rose #F24080 ;
* padding → 16px 28px ;
* border-radius → 25px ;
* border-style / border-width → le cadre du kit ;
* color, font-family, font-size, font-weight, line-height ;
* box-shadow → `.elementor a{box-shadow:none}`.
* `height` s'y ajoute parce que le padding du kit, s'il repassait,
* ferait un bouton de 92 px de haut.
* Aucune autre propriété n'en porte.
*/
.mu-rec .mu-rec-bouton {
display: inline-block !important;
height: 58px !important;
padding: 0 30px !important;
border: 2px solid var(--mu-violet-clair) !important;
border-radius: 10px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: var(--mu-violet-fonce) !important;
font-family: var(--mu-police) !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 54px !important;
letter-spacing: .3px;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
outline: none;
position: relative;
z-index: 1;
box-shadow: 0 6px 18px rgba(110, 53, 195, .10) !important;
transition: background-color .35s var(--mu-courbe),
border-color .35s var(--mu-courbe),
color .35s var(--mu-courbe),
box-shadow .35s var(--mu-courbe),
transform .35s var(--mu-courbe);
}
.mu-rec .mu-rec-bouton:hover,
.mu-rec .mu-rec-bouton:focus {
/* Le dégradé passe par `background-image` : `background-color` reste
une couleur de repli si le dégradé n'est pas rendu. */
background-color: var(--mu-violet) !important;
background-image: linear-gradient(120deg, var(--mu-violet), var(--mu-violet-actif)) !important;
border-color: var(--mu-violet-actif) !important;
color: #fff !important;
box-shadow: 0 16px 34px rgba(110, 53, 195, .30) !important;
transform: translateY(-2px);
}
.mu-rec .mu-rec-bouton:active { transform: translateY(0); }
.mu-rec .mu-rec-bouton:focus-visible {
outline: 3px solid var(--mu-violet-actif) !important;
outline-offset: 3px;
}
/* Le bouton d'envoi du formulaire : même bouton, rempli d'emblée — c'est
l'action principale de la page, elle doit se voir sans survol. */
.mu-rec .mu-rec-envoyer {
background-color: var(--mu-violet) !important;
background-image: linear-gradient(120deg, var(--mu-violet), var(--mu-violet-actif)) !important;
border-color: transparent !important;
color: #fff !important;
padding: 0 40px !important;
box-shadow: 0 14px 32px rgba(110, 53, 195, .26) !important;
}
.mu-rec .mu-rec-envoyer:hover,
.mu-rec .mu-rec-envoyer:focus {
background-color: var(--mu-violet-fonce) !important;
background-image: linear-gradient(120deg, var(--mu-violet-actif), var(--mu-violet)) !important;
border-color: transparent !important;
box-shadow: 0 20px 44px rgba(110, 53, 195, .34) !important;
}
/* État posé par le script pendant l'envoi : on empêche le double clic
sans jamais retirer le bouton du flux. */
.mu-rec .mu-rec-bouton[aria-disabled="true"],
.mu-rec .mu-rec-bouton:disabled {
opacity: .7;
cursor: progress;
transform: none;
box-shadow: none !important;
}
/* ---- Animation `icon-hover`, redéclarée à l'identique ---------------
Valeurs relevées dans themes/histudy/assets/css/style.css. Ne pas
modifier : le bouton doit rester indiscernable de ceux du thème. */
.mu-rec .mu-rec-bouton .btn-text {
display: inline-block;
transform: translateX(7px);
transition: transform .5s;
transition-timing-function: cubic-bezier(0, .71, .4, 1);
color: inherit;
}
.mu-rec .mu-rec-bouton .btn-icon {
display: inline-block;
margin-inline-start: -7px;
color: inherit;
}
.mu-rec .mu-rec-bouton .btn-icon i {
display: inline-block;
opacity: 0;
padding-left: 0;
transform: translateX(-7px);
transition: opacity .25s, transform .5s;
transition-timing-function: cubic-bezier(0, .71, .4, 1);
}
.mu-rec .mu-rec-bouton:hover .btn-text,
.mu-rec .mu-rec-bouton:focus .btn-text { transform: translateX(-7px); }
.mu-rec .mu-rec-bouton:hover .btn-icon i,
.mu-rec .mu-rec-bouton:focus .btn-icon i {
opacity: 1;
transform: translateX(7px);
}
/* ---------------------------------------------------------------------
A5. Bloc d'état — offre de recrutement fermée
---------------------------------------------------------------------
Affiché à la place du formulaire. Ton courtois : ce n'est pas une
erreur, c'est une information. D'où le violet, jamais le rouge.
--------------------------------------------------------------------- */
.mu-rec .mu-rec-etat {
max-width: 640px;
margin: clamp(20px, 4vw, 36px) auto 0;
padding: clamp(26px, 4vw, 40px) clamp(20px, 4vw, 36px);
text-align: center;
background: linear-gradient(160deg, var(--mu-fond-doux), var(--mu-fond-carte));
border: 1px solid var(--mu-trait);
border-radius: var(--mu-rayon-carte);
box-shadow: var(--mu-ombre-carte);
}
.mu-rec .mu-rec-etat-texte {
margin: 0;
color: var(--mu-texte);
line-height: 1.85;
}
/* Pastille au cadenas.
Le est vide et aria-hidden : il ne porte aucune information,
uniquement de l'ornement.
POURQUOI UNE SVG EN data: ET NON UNE POLICE D'ICÔNES — le module doit
tenir seul. Feather (thème) et tutor-icon (extension) sont chargées
aujourd'hui ; rien ne garantit qu'elles le seront demain, ni sur une
page construite avec un gabarit Elementor allégé. Une SVG inscrite
dans la feuille elle-même ne peut ni manquer, ni partir en 404, ni
déclencher une requête réseau. */
.mu-rec .mu-rec-etat-icone {
position: relative;
display: block;
width: 64px;
height: 64px;
margin: 0 auto 20px;
border-radius: 50%;
background: linear-gradient(135deg, #F1E8FF, #E2D2FF);
box-shadow: inset 0 0 0 1px rgba(110, 53, 195, .12);
}
.mu-rec .mu-rec-etat-icone::after {
content: "";
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 28px 28px;
/* Cadenas fermé. `#` encodé en %23 : non encodé, il serait lu comme
le début d'un fragment d'URL et l'image ne se chargerait pas. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E35C3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------------
A6. Le formulaire
--------------------------------------------------------------------- */
.mu-rec .mu-rec-form {
margin-top: clamp(20px, 3vw, 32px);
padding: clamp(22px, 4vw, 44px);
background: var(--mu-fond-carte);
border: 1px solid var(--mu-trait);
border-radius: var(--mu-rayon-carte);
box-shadow: var(--mu-ombre-carte);
text-align: start;
}
/* ---- Grille des champs ---------------------------------------------
Deux colonnes sur grand écran. `minmax(0, 1fr)` et non `1fr` : sans
le minimum à zéro, un contenu long (une adresse e-mail sans espace)
élargit sa colonne et fait déborder la grille. */
.mu-rec .mu-rec-grille {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 2.4vw, 24px);
}
/* Les champs qui méritent toute la largeur. `.mu-rec-champ--large` est
posé par le PHP sur le textarea ; les autres sont désignés ici, car
c'est une décision de mise en page, pas de structure. */
.mu-rec .mu-rec-champ--large,
.mu-rec .mu-rec-champ--linkedin,
.mu-rec .mu-rec-champ--adresse,
.mu-rec .mu-rec-champ--email { grid-column: 1 / -1; }
.mu-rec .mu-rec-champ {
display: flex;
flex-direction: column;
min-width: 0;
}
/* ---- Étiquettes ---------------------------------------------------- */
.mu-rec .mu-rec-label {
display: block;
margin: 0 0 8px;
font-family: var(--mu-police);
font-size: 14.5px;
font-weight: 700;
line-height: 1.5;
color: var(--mu-violet-fonce);
cursor: pointer;
}
.mu-rec .mu-rec-requis {
color: var(--mu-orange);
font-weight: 800;
}
.mu-rec .mu-rec-facultatif {
font-weight: 500;
font-size: 12.5px;
color: var(--mu-texte-discret);
}
/* ---- Champs de saisie ----------------------------------------------
Pas de `!important` ici, et c'est délibéré : le thème ne style les
champs qu'en (0,1,1) au maximum (`input[type=email]`…), notre
sélecteur est en (0,2,0) et l'emporte déjà. Ajouter `!important`
rendrait toute correction locale future impossible pour rien. */
.mu-rec .mu-rec-form .mu-rec-input {
display: block;
width: 100%;
height: 54px;
padding: 0 16px;
background: #FCFBFF;
border: 2px solid var(--mu-trait);
border-radius: 14px;
color: var(--mu-violet-fonce);
font-family: var(--mu-police);
font-size: 16px;
font-weight: 500;
line-height: 50px;
outline: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
transition: border-color .25s ease,
background-color .25s ease,
box-shadow .25s var(--mu-courbe);
}
/* Le champ date sur iOS est rendu à sa hauteur intrinsèque : sans
`min-height`, il s'écrase à 20 px. */
.mu-rec .mu-rec-form input.mu-rec-input[type="date"] {
min-height: 54px;
line-height: normal;
}
.mu-rec .mu-rec-form .mu-rec-textarea {
height: auto;
min-height: 140px;
padding: 14px 16px;
line-height: 1.8;
resize: vertical;
}
.mu-rec .mu-rec-form .mu-rec-input::placeholder {
color: #A79FB5;
opacity: 1; /* Firefox applique 0.54 par défaut. */
}
.mu-rec .mu-rec-form .mu-rec-input:hover { border-color: var(--mu-trait-fort); }
.mu-rec .mu-rec-form .mu-rec-input:focus {
background: #fff;
border-color: var(--mu-violet-actif);
box-shadow: var(--mu-ombre-focus);
}
/* Champ signalé en erreur par le navigateur ou par le script. On
n'utilise PAS `:invalid` seul : il colore en rouge un champ vide que
l'utilisateur n'a pas encore atteint, ce qui est décourageant. */
.mu-rec .mu-rec-form .mu-rec-input[aria-invalid="true"],
.mu-rec .mu-rec-champ.is-erreur .mu-rec-input {
border-color: #E0563F;
background: #FFF7F5;
}
.mu-rec .mu-rec-form .mu-rec-input[aria-invalid="true"]:focus,
.mu-rec .mu-rec-champ.is-erreur .mu-rec-input:focus {
box-shadow: 0 0 0 4px rgba(224, 86, 63, .16);
}
/* ---- Texte d'aide --------------------------------------------------- */
.mu-rec .mu-rec-aide {
margin: 8px 0 0;
font-size: 13px;
line-height: 1.65;
color: var(--mu-texte-discret);
}
/* ---- Groupe de boutons radio (le genre) -----------------------------
Le vrai reste dans le flux et reste focusable :
il est simplement rendu invisible par `appearance:none` + dimensions
nulles, et c'est le