/* ============================================================
   VROOX — feuille de style complète
   Direction : interface d'application de rencontre, pas site web classique.
   Repères visuels : bandeau sombre, accent rouge corail, cartes photo
   plein cadre, barre de navigation fixe en bas sur mobile.
   Polices système uniquement (aucune requête réseau supplémentaire).
   ============================================================ */

:root{
  --rouge:#f5365c;
  --rouge-fonce:#d81b45;
  --rouge-clair:#fff0f3;
  --sombre:#2f3542;
  --sombre-2:#3d4452;
  --ink:#1e2230;
  --ink-2:#5b6172;
  --muted:#9aa0ae;
  --paper:#f4f5f7;
  --card:#ffffff;
  --line:#e5e7eb;
  --radius:10px;
  --shadow:0 1px 3px rgba(30,34,48,.08);
  --shadow-lg:0 8px 24px rgba(30,34,48,.12);
  --tabbar-h:70px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  line-height:1.5;font-size:15px}
img{max-width:100%;height:auto;display:block}
a{color:var(--rouge);text-decoration:none}
a:hover{text-decoration:none;color:var(--rouge-fonce)}

/* GeneratePress : on neutralise ses conteneurs pour reprendre la main */
/* GeneratePress applique .separate-containers .inside-article{padding:30px}
   sur mobile. Notre .inside-article{padding:0} avait une spécificité de
   (0,1,0) contre (0,2,0) : elle perdait, et ces 30 px de vide entouraient le
   contenu de TOUTES les pages. On reprend donc la même spécificité.
   Nos composants gèrent leurs propres marges ; le thème ne doit pas en
   ajouter par-dessus. */
.site-content,
.separate-containers .site-content{padding:0}
.inside-article,.entry-content,
.separate-containers .inside-article,
.separate-containers .entry-content{padding:0}
/* Marges verticales des conteneurs du thème.
   GeneratePress empile huit conteneurs entre notre bannière et notre contenu
   (#page > .site-content > .content-area > .site-main > article >
   .inside-article > .entry-content). Chacun porte ses propres marges, et
   leur somme produisait la bande grise sous le bandeau rouge : c'est le fond
   de page qui apparaissait dans cet intervalle.
   On remet tout le haut à zéro. Le fond gris reste visible ailleurs — autour
   des cartes d'annonces, où il sert à les détacher. */
#page,
.separate-containers .site-content,
.separate-containers .content-area,
.separate-containers .site-main,
.separate-containers .inside-article{margin-top:0;padding-top:0}
.separate-containers .site-main{margin-bottom:0}
.separate-containers .inside-article{margin-bottom:0}
/* L'en-tête d'article est masqué (titres redondants) : sa marge ne doit pas
   survivre au display:none de ses voisins. */
.entry-header{margin:0}
.site-main{margin:0}
#page{background:var(--paper)}
.entry-header,.page-header{display:none}   /* titres de page redondants avec nos propres H1 */

.vx-wrap{max-width:1180px;margin:0 auto;padding:0 14px}

/* ============================================================
   EN-TÊTE SOMBRE
   ============================================================ */
.vx-header{background:var(--sombre);position:sticky;top:0;z-index:100}

/* Trois zones de largeur égale : seul moyen de garder le logo centré quel que
   soit le contenu des côtés. Le burger étant masqué sur grand écran, la zone
   de droite change de largeur — avec un space-between, le logo bougerait. */
.vx-header-inner{max-width:1180px;margin:0 auto;padding:10px 14px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.vx-header-zone{display:flex;align-items:center;gap:14px}
.vx-header-droite{justify-content:flex-end}

.vx-logo{color:#fff;font-size:1.45rem;font-weight:800;letter-spacing:-.5px;
  line-height:1;text-align:center;white-space:nowrap}
.vx-logo span{color:var(--rouge)}
.vx-logo:hover{color:#fff}

/* Compte : avatar rond, ou cadenas quand on n'est pas connecté */
.vx-compte{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:var(--rouge);color:#fff;font-weight:800;
  transition:transform .12s,background .15s}
.vx-compte:hover{color:#fff;transform:scale(1.06)}
.vx-compte img{width:100%;height:100%;object-fit:cover;display:block}
.vx-compte-initiale{font-size:1rem;line-height:1}
.vx-compte-vide{background:rgba(255,255,255,.12);color:#c8cdd8}
.vx-compte-vide:hover{background:rgba(255,255,255,.2);color:#fff}
/* Pastille de messages non lus. overflow:hidden coupe le débord sur l'avatar :
   on la place à l'intérieur du cercle plutôt qu'à cheval sur son bord. */
.vx-compte-point{position:absolute;top:2px;right:2px;width:11px;height:11px;
  border-radius:50%;background:#2f80ed;border:2px solid var(--sombre)}

/* Sur mobile, seul le bouton principal reste : le reste est dans le menu
   et dans la barre d'onglets du bas. */
@media (max-width:719px){
  .vx-header-inner{padding:9px 12px;gap:8px}
  .vx-logo{font-size:1.3rem}
  .vx-compte{width:35px;height:35px}
}

/* ============================================================
   MENU HAMBURGER
   Fonctionne en CSS pur (case à cocher masquée) : reste utilisable
   même si le JavaScript échoue ou n'est pas encore chargé.
   ============================================================ */
.vx-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;cursor:pointer;padding:5px;flex:0 0 auto}
.vx-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;
  transition:transform .25s, opacity .2s}

/* Bouton qui se transforme en croix à l'ouverture */
.vx-menu-toggle:checked ~ .vx-header-inner .vx-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.vx-menu-toggle:checked ~ .vx-header-inner .vx-burger span:nth-child(2){opacity:0}
.vx-menu-toggle:checked ~ .vx-header-inner .vx-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.vx-menu-voile{position:fixed;inset:0;background:rgba(30,34,48,.55);opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s;z-index:300;cursor:pointer}
.vx-menu-toggle:checked ~ .vx-menu-voile{opacity:1;visibility:visible}

.vx-menu{position:fixed;top:0;right:0;bottom:0;width:min(310px,84vw);background:var(--card);
  z-index:301;transform:translateX(100%);transition:transform .28s ease;
  overflow-y:auto;display:flex;flex-direction:column;
  box-shadow:-6px 0 24px rgba(0,0,0,.18)}
.vx-menu-toggle:checked ~ .vx-menu{transform:translateX(0)}

.vx-menu-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:var(--sombre);color:#fff}
.vx-menu-logo{font-size:1.3rem;font-weight:800;letter-spacing:-.5px;line-height:1}
.vx-menu-logo span{color:var(--rouge)}
/* Croix dans une pastille ronde, comme chez plansq : elle se voit et se vise */
.vx-menu-fermer{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;cursor:pointer;flex:0 0 auto;transition:background .15s}
.vx-menu-fermer:hover{background:rgba(255,255,255,.26)}

/* Entrees : icone a gauche, libelle en majuscules, ligne fine de separation */
.vx-menu-liste{list-style:none;margin:0;padding:10px 0 6px}
.vx-menu-liste a{display:flex;align-items:center;gap:13px;
  padding:13px 20px;color:var(--sombre);font-size:.84rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px}
.vx-menu-liste a svg{flex:0 0 auto;color:var(--sombre);opacity:.75}
.vx-menu-liste a:hover{background:var(--rouge-clair);color:var(--rouge)}
.vx-menu-liste a:hover svg{color:var(--rouge);opacity:1}
.vx-menu-badge{margin-left:auto;background:var(--rouge);color:#fff;border-radius:999px;
  min-width:20px;height:20px;font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 6px}

/* Regions avec compteurs — la table des matieres du site */
.vx-menu-regions{border-top:1px solid var(--line);padding:16px 20px 28px}
.vx-menu-regions-titre{margin:0 0 12px;font-size:.8rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;color:var(--sombre)}
.vx-menu-regions ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:11px}
.vx-menu-regions a{display:flex;align-items:center;gap:8px;
  color:var(--rouge);font-size:.79rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px}
.vx-menu-regions a:hover{color:var(--rouge-fonce)}
.vx-menu-nb{background:var(--rouge);color:#fff;border-radius:4px;
  font-size:.68rem;font-weight:700;padding:2px 6px;letter-spacing:0;
  font-variant-numeric:tabular-nums}

/* Le menu est désormais la SEULE navigation de l'en-tête : il doit rester
   fonctionnel à toutes les tailles. Le masquer au-delà de 720px, comme
   auparavant, rendrait le burger inopérant sur ordinateur. */
@media (prefers-reduced-motion:reduce){
  .vx-menu,.vx-menu-voile,.vx-burger span{transition:none}
}

/* ============================================================
   BANNIÈRE CHAT — le bloc rouge signature
   ============================================================ */
.vx-chat-banner{background:var(--rouge);color:#fff;text-align:center;padding:14px 16px}
.vx-chat-title{margin:0 0 11px;font-size:.95rem;font-weight:800;line-height:1.3;
  text-transform:uppercase;letter-spacing:.4px}
.vx-chat-btn{display:inline-block;border:2px solid #fff;color:#fff!important;
  padding:11px 26px;font-weight:700;font-size:.88rem;letter-spacing:.4px;
  border-radius:4px;transition:background .15s,color .15s}
.vx-chat-btn:hover{background:#fff;color:var(--rouge)!important}
@media (min-width:720px){
  .vx-chat-banner{padding:18px 16px}
  .vx-chat-title{font-size:1.15rem}
}

/* ============================================================
   BARRE D'OUTILS (filtres / recherche)
   ============================================================ */
.vx-toolbar{background:var(--card);border-bottom:1px solid var(--line);padding:12px 0}
.vx-toolbar-inner{max-width:1180px;margin:0 auto;padding:0 14px;
  display:flex;gap:10px;align-items:center;justify-content:space-between}

/* Formulaire de recherche WPJM, réhabillé */
form.job_filters,form.vroox-search{background:transparent;padding:0;margin:0;max-width:none}
form.vroox-search .search_jobs{display:flex;flex-direction:column;gap:8px}
@media (min-width:720px){
  form.vroox-search .search_jobs{flex-direction:row;align-items:flex-end}
}
form.vroox-search label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);margin-bottom:5px}
form.vroox-search .search_keywords,form.vroox-search .search_location{flex:1;min-width:0;position:relative}
form.vroox-search input[type=text]{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:var(--radius);background:var(--card);color:var(--ink);font:inherit;font-size:.95rem}
form.vroox-search input[type=text]:focus{outline:none;border-color:var(--rouge)}
form.vroox-search .search_submit input[type=submit],
form.job_filters .search_submit input[type=submit]{
  background:var(--rouge);color:#fff;border:none;border-radius:var(--radius);
  padding:12px 26px;font-weight:700;font-size:.95rem;cursor:pointer;width:100%}
@media (min-width:720px){
  form.vroox-search .search_submit input[type=submit]{width:auto}
}
form.vroox-search .search_submit input[type=submit]:hover{background:var(--rouge-fonce)}

/* ============================================================
   TITRE DE SECTION + INTRO
   ============================================================ */
.vx-section-head{max-width:1180px;margin:0 auto;padding:20px 14px 4px}
.vx-section-head h1,.vx-section-head h2{font-size:1.4rem;font-weight:800;margin:0 0 6px;
  text-transform:uppercase;letter-spacing:-.2px;color:var(--sombre)}
.vx-section-head p{margin:0;color:var(--ink-2);font-size:.92rem}

/* Hero compact : sur mobile, chaque pixel gagné ici fait remonter la
   première photo. Titre plus petit, marges réduites. */
.vroox-hero{max-width:1180px;margin:0 auto;padding:14px 14px 4px}
.vroox-hero h1{font-size:1.15rem;font-weight:800;margin:0 0 3px;text-transform:uppercase;
  color:var(--sombre);line-height:1.25}
.vroox-hero p{margin:0;color:var(--ink-2);font-size:.85rem}
@media (min-width:720px){
  .vroox-hero{padding:22px 14px 6px}
  .vroox-hero h1{font-size:1.45rem;margin-bottom:6px}
  .vroox-hero p{font-size:.92rem}
}
/* Grille collée à la barre de recherche, sans marge superflue */
ul.job_listings{margin-top:12px}

/* ============================================================
   GRILLE DE PROFILS — 2 colonnes dès le mobile (comme plansq)
   ============================================================ */
ul.job_listings{list-style:none;margin:16px auto;padding:0 14px;max-width:1180px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:720px){ ul.job_listings{grid-template-columns:repeat(3,1fr);gap:14px} }
@media (min-width:1000px){ ul.job_listings{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1200px){ ul.job_listings{grid-template-columns:repeat(5,1fr)} }
li.job_listing{list-style:none}

.vroox-card{position:relative;display:flex;flex-direction:column;background:var(--card);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);color:var(--ink);height:100%}
.vroox-card:hover{box-shadow:var(--shadow-lg)}

/* Lien en calque : couvre la carte sans envelopper le bouton favori
   (un <button> dans un <a> est du HTML invalide).
   z-index 2 : le lien doit passer AU-DESSUS du bloc texte, sinon celui-ci
   intercepte les clics sur le pseudo, l'extrait et la ville. Seul le bouton
   favori (z-index 3) reste cliquable indépendamment. */
/* La spécificité est délibérément élevée (et !important sur position) : WP Job
   Manager cible `ul.job_listings li.job_listing a` en 0,3,3 et impose
   position:relative + padding, ce qui transformait ce calque en simple bande
   au bas de la carte — seule cette bande était alors cliquable.
   L'ordre de chargement est corrigé dans vroox-front.php ; ceci est le filet. */
.vroox-card-lien,
ul.job_listings li.job_listing a.vroox-card-lien{
  position:absolute!important;inset:0;z-index:2;
  display:block;padding:0;margin:0;border:0;overflow:hidden;
  background:transparent;line-height:0}
.vroox-card-lien:hover,
ul.job_listings li.job_listing a.vroox-card-lien:hover,
ul.job_listings li.job_listing a.vroox-card-lien:focus{background:transparent}
/* Repère visuel au clavier : sans cela le calque est invisible au focus */
.vroox-card-lien:focus-visible{outline:2px solid var(--rouge);outline-offset:-3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.vroox-card-photo{position:relative;aspect-ratio:3/4;background:var(--sombre-2);overflow:hidden}
.vroox-card-photo img{width:100%;height:100%;object-fit:cover}
.vroox-card-photo-fallback{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-size:2.6rem;font-weight:800;color:#fff;background:var(--sombre-2)}

/* Bouton favori — au-dessus du lien de carte (z-index supérieur) */
.vroox-fav{position:absolute;top:10px;right:10px;z-index:3;
  background:none;border:none;padding:4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));transition:transform .15s}
.vroox-fav:hover{background:none;transform:scale(1.12)}
.vroox-fav-icone{font-size:1.7rem;line-height:1}
.vroox-fav.is-active .vroox-fav-icone{color:var(--rouge)}
.vroox-fav-nombre{font-size:.72rem;font-weight:700;line-height:1}

/* Badge âge : pastille blanche à cheval sur le bas de la photo */
.vroox-age-badge{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);
  background:#fff;color:var(--sombre);border-radius:50%;width:46px;height:46px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;font-size:.98rem;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:2}
.vroox-age-badge small{font-size:.5rem;font-weight:600;text-transform:uppercase;color:var(--muted);margin-top:1px}

.vroox-card-info{padding:26px 12px 14px;text-align:center;display:flex;
  flex-direction:column;gap:6px;flex:1}
.vroox-card-pseudo{margin:0;font-size:.95rem;font-weight:700;color:var(--rouge);
  text-transform:uppercase;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vroox-card-texte{margin:0;font-size:.83rem;line-height:1.45;color:var(--ink-2);
  text-align:left;
  /* deux lignes maximum, coupées proprement */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vroox-card-loc{margin-top:auto;font-size:.83rem;color:var(--rouge);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:4px}

/* ============================================================
   BARRE DE NAVIGATION FIXE EN BAS — mobile uniquement
   ============================================================ */
.vx-tabbar{position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(0,0,0,.07);
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom))}

/* De vrais boutons : une surface tactile pleine, un fond visible, un retour au
   toucher. Hauteur minimale 48px — en dessous, la cible est trop petite pour
   un pouce et les appuis manqués deviennent fréquents. */
.vx-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:9px 4px;min-height:52px;border-radius:12px;
  background:#f2f3f5;color:var(--sombre);
  font-size:.68rem;text-decoration:none;
  border:1px solid transparent;
  transition:background .15s,color .15s,transform .1s;
  -webkit-tap-highlight-color:transparent}
.vx-tab:hover{background:#f2f3f5;color:var(--sombre)}
/* Retour tactile immédiat : le bouton s'enfonce sous le doigt */
.vx-tab:active{transform:scale(.94)}
.vx-tab-icon{position:relative;display:flex;align-items:center;justify-content:center;line-height:0}
.vx-tab-label{font-weight:700;letter-spacing:.2px}

/* Onglet courant : plein rouge, comme le bouton principal du site */
.vx-tab.is-active{background:var(--rouge);color:#fff;border-color:var(--rouge);
  box-shadow:0 2px 8px rgba(245,54,92,.32)}
.vx-tab.is-active:hover{background:var(--rouge);color:#fff}
.vx-tab:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}

.vx-tab-badge{position:absolute;top:-6px;right:-10px;background:var(--rouge);color:#fff;
  border:2px solid var(--card);
  border-radius:999px;min-width:18px;height:18px;font-size:.62rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
/* Sur l'onglet actif le badge rouge sur fond rouge disparaîtrait : on l'inverse */
.vx-tab.is-active .vx-tab-badge{background:#fff;color:var(--rouge);border-color:var(--rouge)}
@media (min-width:720px){ .vx-tabbar{display:none} }
@media (max-width:719px){ body{padding-bottom:var(--tabbar-h)} }

/* ============================================================
   PAGE ANNONCE
   ============================================================ */
.single-job_listing .entry-content,.single-job_listing .inside-article{
  max-width:720px;margin:0 auto;padding:16px 14px}
.single-job_listing h1{font-size:1.5rem;font-weight:800;color:var(--sombre);margin:.2em 0 .5em}

.vroox-annonce-actions{display:flex;flex-direction:column;gap:10px;margin:22px 0;
  padding:18px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
@media (min-width:520px){ .vroox-annonce-actions{flex-direction:row;flex-wrap:wrap;align-items:center} }
.vroox-btn-primary{display:block;text-align:center;background:var(--rouge);color:#fff!important;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:.98rem;flex:1;min-width:180px}
.vroox-btn-primary:hover{background:var(--rouge-fonce)}
.vroox-cta-coreg{display:block;text-align:center;background:var(--sombre);color:#fff!important;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:.98rem;flex:1;min-width:180px}
.vroox-cta-coreg:hover{background:var(--sombre-2)}
.vroox-actions-note{width:100%;margin:2px 0 0;font-size:.82rem;color:var(--muted);text-align:center}

/* ============================================================
   FIL D'ARIANE + MAILLAGE GÉO
   ============================================================ */
/* Fil d'Ariane — texte rouge en majuscules, comme chez plansq.
   Les pastilles précédentes étaient bien identifiées comme cliquables, mais
   elles prenaient deux lignes sur mobile et pesaient plus que le titre qui
   les suit. Le rouge + les majuscules suffisent à signaler le lien pour un
   quart de la place. */
.vroox-breadcrumb{max-width:1180px;margin:0 auto;padding:14px 14px 0}
.vroox-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:0 4px;padding:0;margin:0}
.vroox-breadcrumb li{display:inline-flex;align-items:center;gap:4px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.vroox-breadcrumb li:not(:last-child)::after{content:"›";color:var(--muted);font-weight:400}
.vroox-breadcrumb a{color:var(--rouge);padding:5px 0}
.vroox-breadcrumb a:hover{color:var(--rouge-fonce);text-decoration:underline}
.vroox-breadcrumb li[aria-current]{color:var(--muted)}

/* Barre d'actions : favori et signalement en icônes, sous le fil d'Ariane */
.vroox-actionbar{max-width:1180px;margin:10px auto 0;padding:0 14px;display:flex;gap:8px}
.vroox-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:52px;height:40px;padding:0 13px;border-radius:8px;
  background:var(--card);border:1px solid var(--line);
  color:var(--ink-2);font-size:1.05rem;line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s}
.vroox-act:hover{border-color:var(--rouge);color:var(--rouge);background:var(--card)}
.vroox-act.is-active{color:var(--rouge);border-color:var(--rouge)}
.vroox-act-nb{font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}

/* Titre de l'annonce — grand, en majuscules. Le H1 du thème reste masqué :
   il n'affiche que le pseudo, sans l'âge ni la ville. */
.vroox-annonce-titre{max-width:1180px;margin:14px auto 4px;padding:0 14px;
  font-size:1.45rem;font-weight:800;line-height:1.15;letter-spacing:-.3px;
  text-transform:uppercase;color:var(--sombre);text-wrap:balance}
@media (min-width:720px){ .vroox-annonce-titre{font-size:1.85rem} }

.vroox-geo-mesh{max-width:1180px;margin:26px auto;padding:18px 14px;background:var(--card);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.vroox-geo-mesh h3{margin:0 0 12px;font-size:.95rem;text-transform:uppercase;
  letter-spacing:.4px;color:var(--sombre)}
.vroox-chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0}
.vroox-chips a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:7px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  font-size:.84rem;color:var(--ink-2);font-weight:600;
  transition:background .15s,border-color .15s,color .15s}
.vroox-chips a:hover,.vroox-chips a:focus-visible{background:var(--rouge);border-color:var(--rouge);color:#fff}
.vroox-chips a:hover .vroox-count{color:#fff}
.vroox-count{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
/* Remontée vers le département : un bouton plein, pas une ligne de texte —
   c'est le lien qui ramène le visiteur dans le maillage quand l'annonce
   ne lui convient pas. */
.vroox-up-link{margin:14px 0 0}
.vroox-up-link a{display:inline-flex;align-items:center;gap:7px;
  padding:11px 20px;border-radius:999px;
  background:var(--rouge);color:#fff!important;
  font-weight:700;font-size:.86rem;
  box-shadow:0 2px 8px rgba(245,54,92,.28);transition:background .15s}
.vroox-up-link a:hover{background:var(--rouge-fonce);color:#fff!important}


/* ============================================================
   NAVIGATION GÉO (accordéon)
   ============================================================ */
.vroox-geo-nav{max-width:1180px;margin:16px auto;padding:0 14px;display:grid;gap:8px}
.vroox-geo-region{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.vroox-geo-region summary{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:15px 18px;cursor:pointer;font-weight:700;list-style:none;font-size:.95rem;color:var(--sombre)}
.vroox-geo-region summary::-webkit-details-marker{display:none}
.vroox-geo-region summary::before{content:"›";font-size:1.2rem;color:var(--rouge);
  transition:transform .2s;display:inline-block}
.vroox-geo-region[open] summary::before{transform:rotate(90deg)}
.vroox-geo-region summary:hover{background:var(--rouge-clair)}
.vroox-geo-region-name{flex:1}
.vroox-geo-depts{padding:4px 18px 16px;border-top:1px solid var(--line)}
.vroox-geo-dept{padding:11px 0;border-bottom:1px solid var(--line)}
.vroox-geo-dept:last-child{border-bottom:none}
.vroox-geo-dept-name{display:inline-block;font-weight:700;color:var(--sombre);margin-bottom:6px;font-size:.9rem}
.vroox-geo-dept-name:hover{color:var(--rouge)}
.vroox-geo-villes{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:6px 0 0}
.vroox-geo-villes a{display:inline-block;padding:5px 12px;background:var(--paper);
  border-radius:999px;font-size:.82rem;color:var(--ink-2)}
.vroox-geo-villes a:hover{background:var(--rouge);color:#fff}
.vroox-geo-villes a:hover .vroox-count{color:#fff}

.vroox-region-index{max-width:1180px;margin:16px auto;padding:0 14px;
  display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:600px){ .vroox-region-index{grid-template-columns:repeat(2,1fr)} }
.vroox-region-card{display:flex;justify-content:space-between;align-items:center;
  padding:15px 18px;background:var(--card);border-radius:var(--radius);color:var(--ink);box-shadow:var(--shadow)}
.vroox-region-name{font-weight:700}
.vroox-region-card .vroox-count{background:var(--rouge-clair);color:var(--rouge);
  border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:700}

/* ============================================================
   FORMULAIRES
   ============================================================ */
form.job-manager-form,.vroox-login,.vroox-register{max-width:560px;margin:20px auto;padding:0 14px}
form.job-manager-form fieldset{border:none;padding:0;margin:0 0 18px;display:block}
form.job-manager-form fieldset label,.vroox-login label,.vroox-register label{
  display:block;float:none;width:auto;font-weight:700;font-size:.88rem;
  color:var(--sombre);margin:0 0 6px;text-align:left}
form.job-manager-form .field{display:block;float:none;width:auto;margin:0}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=tel],select,textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--card);color:var(--ink);font:inherit;font-size:1rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rouge)}
textarea{min-height:130px;resize:vertical}
small.description{display:block;margin-top:5px;color:var(--muted);font-size:.82rem}
input[type=file]{width:100%;padding:14px;border:1.5px dashed var(--line);
  border-radius:var(--radius);background:var(--paper);font-size:.88rem;cursor:pointer}
input[type=file]:hover{border-color:var(--rouge)}

button,input[type=submit]{background:var(--rouge);color:#fff;border:none;border-radius:999px;
  padding:14px 32px;font-weight:700;font-size:.98rem;cursor:pointer;font-family:inherit}
button:hover,input[type=submit]:hover{background:var(--rouge-fonce)}

.vroox-login,.vroox-register{background:var(--card);border-radius:var(--radius);
  padding:26px 22px;box-shadow:var(--shadow);max-width:400px}
.vroox-login-alt{margin-top:16px;font-size:.87rem;color:var(--muted);text-align:center;line-height:1.9}
.vroox-errors{background:var(--rouge-clair);border-left:3px solid var(--rouge);
  padding:11px 15px;margin-bottom:16px;font-size:.88rem;color:var(--rouge-fonce);border-radius:4px}

.vroox-account-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  background:var(--card);border-radius:var(--radius);padding:14px 18px;
  margin:0 auto 22px;max-width:560px;font-size:.88rem;color:var(--ink-2);box-shadow:var(--shadow)}
.vroox-account-bar a{color:var(--rouge);font-weight:600}
.vroox-account-bar-guest{flex-direction:column;align-items:flex-start}

/* Autosuggestion de villes */
.vroox-suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:60;overflow:hidden;
  display:none;max-height:270px;overflow-y:auto}
.vroox-suggest.open{display:block}
.vroox-suggest-item{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line);padding:11px 15px;
  cursor:pointer;font:inherit;color:var(--ink);border-radius:0}
.vroox-suggest-item:last-child{border-bottom:none}
.vroox-suggest-item:hover{background:var(--rouge-clair)}
.vroox-suggest-item small{color:var(--muted);font-size:.78rem}

/* ============================================================
   FAVORIS / SIGNALEMENT / MESSAGERIE
   ============================================================ */
.vroox-fav-btn{display:inline-block;background:none;border:1.5px solid var(--line);
  color:var(--ink-2);border-radius:999px;padding:9px 20px;font-weight:600;font-size:.88rem;cursor:pointer}
.vroox-fav-btn:hover{border-color:var(--rouge);color:var(--rouge);background:none}
.vroox-fav-btn.active{background:var(--rouge-clair);border-color:var(--rouge);color:var(--rouge)}
.vroox-report{max-width:720px;margin:20px auto;padding:0 14px;font-size:.86rem}
.vroox-report summary{cursor:pointer;color:var(--muted)}
.vroox-report-thanks{color:#1e7e46;font-size:.9rem}

.vroox-inbox{list-style:none;padding:0 14px;margin:16px auto;max-width:720px}
.vroox-inbox li{background:var(--card);border-radius:var(--radius);margin-bottom:8px;box-shadow:var(--shadow)}
.vroox-inbox li a{display:block;padding:15px 18px;color:var(--ink);font-weight:600}
.vroox-thread{max-width:720px;margin:16px auto;padding:0 14px;display:flex;flex-direction:column;gap:8px}
.vroox-thread p{margin:0;padding:11px 16px;border-radius:16px;max-width:78%;font-size:.93rem}
.vroox-thread p.mine{align-self:flex-end;background:var(--rouge);color:#fff}
.vroox-thread p.theirs{align-self:flex-start;background:var(--card);box-shadow:var(--shadow)}

/* ============================================================
   BOUTON FLOTTANT "PUBLIER" — desktop uniquement.
   Sur mobile la barre du bas contient déjà l'action "Annonce" :
   afficher les deux ferait doublon et masquerait du contenu.
   ============================================================ */
.vx-fab{display:none}
@media (min-width:720px){
  .vx-fab{display:inline-flex;align-items:center;gap:7px;position:fixed;
    right:24px;bottom:24px;z-index:150;background:var(--rouge);color:#fff!important;
    padding:14px 24px;border-radius:999px;font-weight:700;font-size:.95rem;
    box-shadow:0 6px 20px rgba(245,54,92,.4)}
  .vx-fab:hover{background:var(--rouge-fonce);color:#fff!important}
}

/* ============================================================
   TABLEAU DE BORD MEMBRE
   ============================================================ */
/* ============================================================
   ESPACE MEMBRE — hub à tuiles
   ============================================================ */
.vx-hub{max-width:1180px;margin:0 auto;padding:12px 14px 18px}

/* Une seule ligne, avatar compris : l'en-tête ne doit pas coûter la hauteur
   d'une tuile avant d'avoir montré quoi que ce soit d'utile. */
.vx-hub-tete{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.vx-hub-avatar{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:var(--rouge);color:#fff;font-size:1.05rem;font-weight:800}
.vx-hub-bonjour{margin:0;font-size:1rem;color:var(--ink-2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-hub-bonjour strong{font-weight:800;color:var(--sombre)}

/* Deux colonnes dès le mobile : chaque tuile reste assez large pour son
   libellé, et les six tiennent sans défilement. */
.vx-hub-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media (min-width:720px){ .vx-hub-grille{grid-template-columns:repeat(3,1fr);gap:14px} }

.vx-tuile{position:relative;display:flex;flex-direction:column;gap:3px;
  padding:17px 15px 15px;min-height:118px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);box-shadow:var(--shadow);
  transition:border-color .15s,box-shadow .15s,transform .1s}
.vx-tuile:hover{border-color:var(--rouge);box-shadow:var(--shadow-lg);color:var(--ink)}
.vx-tuile:active{transform:scale(.98)}
.vx-tuile:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
.vx-tuile-icone{display:flex;color:var(--rouge);margin-bottom:7px}
.vx-tuile-label{font-size:.92rem;font-weight:700;line-height:1.25;color:var(--sombre)}
.vx-tuile-texte{font-size:.76rem;line-height:1.35;color:var(--muted)}

/* Le compteur est ce qui justifie la grille : d'un coup d'œil on sait ce qui
   a bougé depuis la dernière visite. */
.vx-tuile-nb{position:absolute;top:12px;right:12px;
  background:var(--rouge);color:#fff;border-radius:999px;
  min-width:22px;height:22px;padding:0 7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums}

/* La suppression de compte reste sobre : elle ne doit pas se présenter comme
   une fonctionnalité, mais rester trouvable (obligation RGPD). */
.vx-tuile.est-danger .vx-tuile-icone{color:var(--muted)}
.vx-tuile.est-danger .vx-tuile-label{color:var(--ink-2);font-weight:600}
.vx-tuile.est-danger:hover{border-color:#b91c1c}
.vx-tuile.est-danger:hover .vx-tuile-icone,
.vx-tuile.est-danger:hover .vx-tuile-label{color:#b91c1c}

.vx-hub-sortie{margin:22px 0 0;text-align:center}
.vx-hub-sortie a{font-size:.86rem;color:var(--ink-2);text-decoration:underline}
.vx-hub-sortie a:hover{color:var(--rouge)}

/* --- Vue d'une section ---
   Les marges sont resserrées : entre le retour, le titre et le cadre, l'écran
   perdait près de 90 px avant d'afficher le moindre contenu utile. Le titre de
   section, lui, était rendu DEUX fois — une par ce conteneur, une par la
   section elle-même ; celui des sections a été supprimé. */
.vx-vue{max-width:1180px;margin:0 auto;padding:11px 14px 18px}
.vx-vue-retour{margin:0 0 7px}
.vx-vue-retour a{display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--rouge)}
.vx-vue-retour a:hover{color:var(--rouge-fonce)}
.vx-vue-titre{margin:0 0 11px;font-size:1.22rem;font-weight:800;
  text-transform:uppercase;letter-spacing:-.2px;color:var(--sombre)}

.vx-dash-panel{background:var(--card);border-radius:var(--radius);
  padding:16px 15px;box-shadow:var(--shadow);min-width:0}
@media (min-width:720px){ .vx-dash-panel{padding:22px 20px} }
/* Premier élément du panneau : sa marge haute s'ajoutait au padding du cadre */
.vx-dash-panel > :first-child{margin-top:0}

.vx-form{max-width:520px;margin:0;padding:0}
.vx-form label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--ink-2);margin:18px 0 6px}
.vx-form label:first-of-type{margin-top:0}
.vx-form small{display:block;margin-top:5px;color:var(--muted);font-size:.8rem}
.vx-form button{margin-top:22px}
.vx-btn-danger{background:#b91c1c!important}
.vx-btn-danger:hover{background:#991b1b!important}
.vx-check{display:flex!important;align-items:flex-start;gap:9px;text-transform:none!important;
  letter-spacing:0!important;font-weight:500!important;font-size:.88rem!important;color:var(--ink)!important}
.vx-check input{width:auto;margin-top:2px}

.vx-notice{padding:12px 16px;border-radius:var(--radius);margin-bottom:18px;font-size:.9rem}
.vx-notice p{margin:0 0 6px}
.vx-notice p:last-child{margin-bottom:0}
.vx-notice-ok{background:#ecfdf5;color:#065f46;border-left:3px solid #10b981}
.vx-notice-err{background:var(--rouge-clair);color:#991b1b;border-left:3px solid var(--rouge)}
.vx-notice-warn{background:#fffbeb;color:#92400e;border-left:3px solid #f59e0b}

.vx-photo-current{margin-bottom:20px}
.vx-photo-img{border-radius:var(--radius);max-width:200px}
.vx-photo-placeholder{width:150px;height:150px;background:var(--paper);border:2px dashed var(--line);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.85rem}
.vx-back{margin:0 0 16px;font-size:.88rem}

/* ============================================================
   BARRE DE RECHERCHE COMPACTE
   Repliée par défaut : c'est ce qui permet aux photos de remonter en
   haut de l'écran sur mobile, au lieu d'être repoussées par un
   formulaire déplié.
   ============================================================ */
.vx-search-wrap{background:var(--card);border-bottom:1px solid var(--line)}
.vx-search-bar{display:flex;gap:8px;max-width:1180px;margin:0 auto;padding:10px 14px;
  cursor:pointer;list-style:none}
.vx-search-bar::-webkit-details-marker{display:none}
.vx-search-bar-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border:1.5px solid var(--line);border-radius:var(--radius);
  font-size:.85rem;font-weight:600;color:var(--rouge);background:var(--card);flex:1;
  justify-content:center;transition:border-color .15s}
.vx-search-bar:hover .vx-search-bar-btn{border-color:var(--rouge)}
.vx-search-bar-alt{color:var(--ink-2)}
@media (min-width:720px){
  .vx-search-bar-btn{flex:0 0 auto}
}

.vx-search{max-width:1180px;margin:0 auto;padding:4px 14px 16px}
.vx-search-row{display:flex;flex-direction:column;gap:10px}
@media (min-width:720px){ .vx-search-row{flex-direction:row;align-items:flex-end} }
.vx-field{flex:1;min-width:0;position:relative}
.vx-field-sm{max-width:120px}
.vx-field label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);margin-bottom:5px}
/* Bouton de recherche : il héritait du gris par défaut, il doit porter l'accent */
.vx-search-submit{white-space:nowrap;background:var(--rouge);color:#fff;border:none;
  border-radius:999px;padding:13px 30px;font-weight:700;font-size:.95rem;cursor:pointer}
.vx-search-submit:hover{background:var(--rouge-fonce)}
.vx-filters-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:14px}

.vx-pagination{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:26px auto;max-width:1180px}
.vx-pagination a{padding:9px 15px;background:var(--card);border-radius:var(--radius);
  color:var(--ink-2);font-weight:600;font-size:.88rem;box-shadow:var(--shadow)}
.vx-pagination a:hover,.vx-pagination a.is-current{background:var(--rouge);color:#fff}

/* ============================================================
   ÉTAT VIDE
   ============================================================ */
.vroox-empty{list-style:none;grid-column:1/-1;text-align:center;padding:40px 22px;
  background:var(--card);border-radius:var(--radius);margin:16px auto;max-width:560px;box-shadow:var(--shadow)}
.vroox-empty-title{font-size:1.05rem;font-weight:700;color:var(--sombre);margin:0 0 6px}
.vroox-empty-text{color:var(--muted);margin:0 0 18px;font-size:.9rem}
.vroox-empty .vroox-btn-primary{display:inline-block;flex:none;min-width:0}
li.no_job_listings_found{list-style:none;grid-column:1/-1}

/* ============================================================
   PIED DE PAGE
   ============================================================ */

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   MESSAGES PUBLICS
   ============================================================ */
.vroox-public{margin:22px 0;background:var(--card);border-radius:var(--radius);
  padding:18px 16px;box-shadow:var(--shadow)}
.vroox-public-titre{margin:0 0 16px;font-size:1.05rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--sombre);
  display:flex;align-items:center;gap:8px}
.vroox-public-compte{background:#2f80ed;color:#fff;border-radius:4px;
  font-size:.72rem;font-weight:700;padding:2px 7px;letter-spacing:0}

.vroox-public-liste{list-style:none;margin:0 0 22px;padding:0;
  display:flex;flex-direction:column;gap:18px}
.vroox-public-item{display:flex;gap:12px;align-items:flex-start}
.vroox-public-avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:var(--rouge);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:1.15rem}
.vroox-public-corps{min-width:0;flex:1}
.vroox-public-nom{margin:0 0 4px;font-weight:700;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.3px;color:var(--sombre)}
.vroox-public-nom time{margin-left:8px;font-weight:500;font-size:.76rem;
  text-transform:none;letter-spacing:0;color:var(--muted)}
.vroox-public-texte{font-size:.93rem;line-height:1.5;color:var(--ink-2);
  overflow-wrap:anywhere}
.vroox-msg-photo-wrap{margin-top:9px}
.vroox-msg-photo{max-width:200px;border-radius:8px}
.vroox-public-vide{color:var(--muted);font-size:.9rem;margin:0 0 20px}

.vroox-public-form{border-top:1px solid var(--line);padding-top:18px}
.vroox-public-form h3{margin:0 0 12px;font-size:.98rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--sombre)}
/* Avertissement : ton informatif, pas alarmiste — il doit être lu, pas subi */
.vroox-public-avert{background:#fdf3d7;border-radius:6px;padding:10px 13px;
  font-size:.83rem;line-height:1.4;color:#6b5514;margin:0 0 13px}
.vroox-public-qui{font-size:.86rem;color:var(--ink-2);margin:0 0 14px}
.vroox-cf-champ{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.vroox-cf-champ label{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted)}
.vroox-cf-champ textarea{width:100%;border:1px solid var(--line);border-radius:6px;
  padding:12px;font:inherit;font-size:.95rem;line-height:1.45;resize:vertical;
  background:var(--paper);color:var(--ink)}
.vroox-cf-champ textarea:focus{outline:2px solid var(--rouge);outline-offset:-1px;background:#fff}
.vroox-cf-champ input[type=file]{font-size:.83rem;border:1px solid var(--line);
  border-radius:6px;padding:9px;background:var(--paper);color:var(--ink-2);width:100%}
/* Le bouton interne du champ fichier est le seul morceau stylable de façon
   fiable entre navigateurs ; on lui donne l'aspect d'un bouton secondaire. */
.vroox-cf-champ input[type=file]::file-selector-button{
  border:1px solid var(--line);border-radius:5px;background:var(--card);
  color:var(--sombre);font:inherit;font-size:.82rem;font-weight:600;
  padding:7px 14px;margin-right:11px;cursor:pointer}
.vroox-cf-champ input[type=file]::file-selector-button:hover{
  border-color:var(--rouge);color:var(--rouge)}
.vroox-cf-aide{font-size:.78rem;color:var(--muted)}
.vroox-public-form .submit,.vroox-public-envoyer{background:var(--rouge);color:#fff;
  border:none;border-radius:6px;padding:13px 30px;font:inherit;font-weight:700;
  font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}
.vroox-public-form .submit:hover,.vroox-public-envoyer:hover{background:var(--rouge-fonce)}
.vroox-public-invite{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.vroox-public-invite a{font-weight:700;text-decoration:underline}
.vroox-public-attente{background:#e4f1ea;color:#1c7148;border-radius:6px;
  padding:12px 14px;font-size:.9rem;font-weight:600;margin:0 0 16px}

/* ============================================================
   ÉCRAN "CRÉE UN COMPTE" (zones réservées)
   ============================================================ */
.vroox-gate{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:34px 20px;text-align:center;margin:20px 0}
.vroox-gate-titre{margin:0 0 10px;font-size:1.2rem;font-weight:800;color:var(--sombre);
  text-transform:uppercase;letter-spacing:.5px}
.vroox-gate-texte{margin:0 auto 20px;max-width:44ch;color:var(--ink-2);font-size:.95rem}
.vroox-gate-actions{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.vroox-gate-lien{font-size:.88rem;color:var(--ink-2);text-decoration:underline}
.vroox-gate-lien:hover{color:var(--rouge)}

/* GeneratePress enveloppe son appel à comments_template() dans .comments-area.
   Ce gabarit étant neutralisé sur les annonces (les messages publics sont rendus
   dans le contenu), le conteneur reste dans le DOM mais vide — et le thème lui
   donne un fond blanc et 30px de marge intérieure, ce qui affichait une boîte
   blanche vide sous chaque annonce. Il ne contient aucun texte ni élément
   interactif : le masquer ne retire rien au clavier ni aux lecteurs d'écran. */
.single-job_listing .comments-area:empty{display:none}

/* ============================================================
   CONTACTER — carte rouge (message privé) + bouton chat
   Hiérarchie assumée : le message privé est le service du site, il occupe
   la carte pleine ; le chat partenaire est un simple bouton en dessous.
   ============================================================ */
/* La carte déborde des marges du contenu pour occuper toute la largeur de
   l'écran sur mobile, comme chez plansq : c'est l'élément le plus important
   de la page, il ne doit pas paraître enserré. Au-delà de 720px on revient
   dans le flux, une bande rouge pleine largeur y serait écrasante. */
.vroox-voies{display:flex;flex-direction:column;gap:16px;margin:22px 0}
@media (max-width:719px){
  .vroox-voies{margin-left:-14px;margin-right:-14px}
  .vroox-mpcarte{border-radius:0}
  .vroox-chat-bloc{padding:0 14px}
}

.vroox-mpcarte{background:linear-gradient(160deg,#f5365c,#e0214a);color:#fff;
  border-radius:var(--radius);padding:30px 22px 26px;
  box-shadow:0 6px 22px rgba(245,54,92,.28)}
.vroox-mpcarte-tete{display:flex;flex-direction:column;align-items:center;
  gap:11px;margin-bottom:20px;text-align:center}

/* Avatar rond avec pastille de présence, façon messagerie */
.vroox-mpcarte-avatar{position:relative;display:block;width:96px;height:96px}
.vroox-mpcarte-avatar img{width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:4px solid rgba(255,255,255,.95);box-shadow:0 3px 12px rgba(0,0,0,.18)}
.vroox-mpcarte-dot{position:absolute;right:5px;bottom:5px;width:19px;height:19px;
  border-radius:50%;background:#2fbf71;border:3px solid #ee2850;
  box-shadow:0 0 0 0 rgba(47,191,113,.7);animation:vroox-pulse 2s infinite}
@keyframes vroox-pulse{
  70%{box-shadow:0 0 0 8px rgba(47,191,113,0)}
  100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}
}
@media (prefers-reduced-motion:reduce){ .vroox-mpcarte-dot{animation:none} }

.vroox-mpcarte-titre{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;
  text-transform:uppercase;letter-spacing:.6px}
.vroox-mpcarte-titre strong{font-weight:800}
.vroox-mpcarte-statut{margin:0;font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.78)}
/* Le vert ne passerait pas sur le rouge : la présence se signale en blanc plein */
.vroox-mpcarte-statut.est-en-ligne{color:#fff}

/* Formulaire dans la carte */
.vroox-mpcarte .vroox-mp{background:transparent;padding:0;margin:0}
.vroox-mpcarte .vroox-mp-form{display:flex;flex-direction:column;gap:13px}
.vroox-mpcarte .vroox-mp-form textarea{width:100%;min-height:130px;
  border:none;border-radius:10px;padding:16px;
  font:inherit;font-size:1rem;line-height:1.5;resize:vertical;
  color:var(--ink);background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.vroox-mpcarte .vroox-mp-form textarea::placeholder{color:#9aa0ae}
.vroox-mpcarte .vroox-mp-form textarea:focus{outline:3px solid rgba(255,255,255,.75);outline-offset:2px}
.vroox-mpcarte .vroox-mp-envoyer{background:#fff;color:var(--rouge);border:none;
  border-radius:10px;padding:16px;font:inherit;font-weight:800;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.8px;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.13);transition:background .15s,transform .1s}
.vroox-mpcarte .vroox-mp-envoyer:hover{background:#ffe9ee}
.vroox-mpcarte .vroox-mp-envoyer:active{transform:scale(.98)}
.vroox-mpcarte .vroox-mp-ok,.vroox-mpcarte .vroox-mp-err{margin:0 0 12px;
  padding:10px 12px;border-radius:6px;font-size:.86rem;background:rgba(255,255,255,.2)}
.vroox-mpcarte .vroox-mp-ok a{color:#fff;text-decoration:underline}

/* --- Chat partenaire : un bouton, point --- */
.vroox-chat-bloc{text-align:center}
.vroox-chat-cta{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:15px 18px;border-radius:999px;
  background:linear-gradient(135deg,#0a7cff,#00c6ff);
  color:#fff!important;font-weight:800;font-size:.95rem;
  box-shadow:0 4px 14px rgba(10,124,255,.35);
  transition:transform .12s,box-shadow .15s}
.vroox-chat-cta:hover{color:#fff!important;transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(10,124,255,.48)}
.vroox-chat-cta:active{transform:translateY(0)}
.vroox-chat-cta svg{flex:0 0 auto}
.vroox-chat-mention{margin:7px 0 0;font-size:.7rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px}
@media (prefers-reduced-motion:reduce){
  .vroox-chat-cta{transition:none}
  .vroox-chat-cta:hover{transform:none}
}

/* NOTE — un bloc "LES DEUX VOIES DE CONTACT" figurait ici, vestige de la
   version où le message privé et le chat s'affichaient en deux colonnes.
   Il était placé APRÈS le bloc actuel et l'écrasait : sur grand écran, la
   carte rouge et le bouton bleu repartaient côte à côte, le second laissant
   une colonne vide sous lui. Supprimé — la seule définition qui vaut est
   plus haut, sous "CONTACTER". */


}

/* ============================================================
   PAGE VILLE / DÉPARTEMENT / RÉGION
   ============================================================ */

/* Titre + compteur */
.vx-section-head{max-width:1180px;margin:16px auto 0;padding:0 14px}
.vx-section-head h1{margin:0;font-size:1.5rem;font-weight:800;line-height:1.1;
  letter-spacing:-.3px;text-transform:uppercase;color:var(--sombre)}
.vx-section-head p{margin:4px 0 0;font-size:.88rem;color:var(--muted)}
@media (min-width:720px){ .vx-section-head h1{font-size:1.9rem} }

/* Remontée d'un niveau : petit bouton bordé, à la manière du « Rhône ↗ » de
   plansq. En simple lien souligné, il se confondait avec le fil d'Ariane. */
.vx-remonter{max-width:1180px;margin:11px auto 0;padding:0 14px}
.vx-remonter a{display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:8px;
  background:var(--card);border:1px solid var(--line);
  color:var(--sombre);font-size:.84rem;font-weight:700;
  transition:border-color .15s,color .15s}
.vx-remonter a:hover{border-color:var(--rouge);color:var(--rouge)}

/* Chapeau éditorial repliable : le texte SEO ne doit pas repousser les
   annonces sous la ligne de flottaison. Il reste dans le HTML, donc indexable. */
.vroox-editorial{max-width:1180px;margin:14px auto;padding:0 14px;
  color:var(--ink-2);font-size:.92rem;line-height:1.55}
.vroox-editorial summary{cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--rouge)}
.vroox-editorial summary::-webkit-details-marker{display:none}
.vroox-editorial summary::after{content:"＋";font-weight:400;font-size:.95rem}
.vroox-editorial[open] summary::after{content:"−"}
.vroox-editorial p{margin:11px 0 0;border-left:3px solid var(--rouge);padding-left:13px}

/* « Voir aussi » : les villes voisines, en deux colonnes, avec une épingle.
   Placé avant les annonces, ce bloc doit rester léger — d'où la liste et non
   des pastilles, qui prendraient trois fois la hauteur. */
.vroox-geo-mesh{max-width:1180px;margin:16px auto;padding:0 14px;
  background:none;border-radius:0;box-shadow:none}
.vroox-geo-mesh h3{margin:0 0 10px;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.vroox-geo-mesh .vroox-chips{display:grid;grid-template-columns:repeat(2,1fr);
  gap:9px 12px;list-style:none;padding:0;margin:0}
@media (min-width:720px){ .vroox-geo-mesh .vroox-chips{grid-template-columns:repeat(4,1fr)} }
.vroox-geo-mesh .vroox-chips a{display:inline-flex;align-items:center;gap:6px;
  min-height:auto;padding:0;background:none;border:none;border-radius:0;
  color:var(--rouge);font-size:.86rem;font-weight:600}
.vroox-geo-mesh .vroox-chips a:hover{background:none;color:var(--rouge-fonce);
  text-decoration:underline}
/* Épingle en masque : elle prend ainsi la couleur du lien, survol compris */
.vroox-geo-mesh .vroox-chips a::before{content:"";flex:0 0 auto;width:12px;height:12px;
  background-color:currentColor;
  -webkit-mask:var(--pin) center/contain no-repeat;mask:var(--pin) center/contain no-repeat}
:root{--pin:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E")}
.vroox-geo-mesh .vroox-count{font-size:.75rem;color:var(--muted);font-weight:500}

/* Cartes en pleine largeur sur les pages géo, comme plansq : une commune
   affiche peu d'annonces, les serrer en deux colonnes étroites les rendait
   moins lisibles que sur l'accueil où le volume justifie la grille. */
ul.job_listings.est-liste-geo{grid-template-columns:1fr;gap:14px}
@media (min-width:720px){ ul.job_listings.est-liste-geo{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ ul.job_listings.est-liste-geo{grid-template-columns:repeat(3,1fr)} }
/* Photo moins haute : en 3/4 sur toute la largeur de l'écran, elle occuperait
   presque la hauteur du viewport à elle seule. */
@media (max-width:719px){
  .est-liste-geo .vroox-card-photo{aspect-ratio:4/3}
  .est-liste-geo .vroox-card-pseudo{font-size:1.05rem}
  .est-liste-geo .vroox-card-texte{font-size:.9rem;-webkit-line-clamp:2}
}

/* ============================================================
   PIED DE PAGE
   Bandeau sombre en écho à l'en-tête, et dernier étage du maillage :
   les régions restent accessibles depuis n'importe quelle page.
   ============================================================ */
.vx-pied{background:var(--sombre);color:#a8afbc;margin-top:38px}
/* La barre d'onglets fixe recouvrirait la fin du pied de page sur mobile */
@media (max-width:719px){ .vx-pied{margin-bottom:var(--tabbar-h)} }

.vx-pied-inner{max-width:1180px;margin:0 auto;padding:34px 14px 28px;
  display:grid;grid-template-columns:1fr;gap:30px}
@media (min-width:760px){
  .vx-pied-inner{grid-template-columns:1.4fr 1fr 1fr;gap:38px}
  .vx-pied-cols{display:contents}   /* les deux colonnes rejoignent la grille parente */
}

.vx-pied-logo{display:inline-block;color:#fff;font-size:1.4rem;font-weight:800;
  letter-spacing:-.5px;line-height:1;margin-bottom:11px}
.vx-pied-logo span{color:var(--rouge)}
.vx-pied-logo:hover{color:#fff}
.vx-pied-marque p{margin:0;font-size:.86rem;line-height:1.6;max-width:42ch}

/* Colonnes de liens */
.vx-pied-cols{gap:30px}
@media (max-width:759px){ .vx-pied-cols{display:grid;grid-template-columns:1fr 1fr} }
.vx-pied-col h2,.vx-pied-regions h2{margin:0 0 13px;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.9px;color:#fff}
.vx-pied-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vx-pied-col a{color:#a8afbc;font-size:.88rem}
.vx-pied-col a:hover{color:var(--rouge)}

/* Régions : pastilles sombres avec compteur réel */
.vx-pied-regions{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.09);padding-top:26px}
.vx-pied-regions ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vx-pied-regions a{display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#c8cdd8;font-size:.8rem;font-weight:600;
  transition:background .15s,border-color .15s,color .15s}
.vx-pied-regions a:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}
.vx-pied-regions a span{font-size:.72rem;color:#8990a0;font-variant-numeric:tabular-nums}
.vx-pied-regions a:hover span{color:#fff}

/* Barre inférieure, un ton plus sombre pour asseoir la page */
.vx-pied-bas{background:rgba(0,0,0,.22);padding:15px 14px}
.vx-pied-bas p{margin:0}
.vx-pied-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:9px 18px;font-size:.78rem;color:#8990a0;text-align:center}
@media (min-width:760px){
  .vx-pied-bas{justify-content:space-between;
    padding-left:max(14px,calc((100vw - 1180px)/2 + 14px));
    padding-right:max(14px,calc((100vw - 1180px)/2 + 14px))}
}
.vx-pied-majeur{display:inline-flex;align-items:center;gap:8px}
.vx-pied-majeur span{background:var(--rouge);color:#fff;border-radius:4px;
  padding:2px 7px;font-size:.7rem;font-weight:800;letter-spacing:.3px}

/* ============================================================
   PAGE DE DÉPÔT D'ANNONCE
   ============================================================ */
.vx-depot-tete{background:var(--sombre);margin:0 -14px 18px;padding:22px 14px;text-align:center}
.vx-depot-tete h2{margin:0;color:#fff;font-size:1.3rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px}
@media (min-width:720px){
  .vx-depot-tete{margin-left:0;margin-right:0;border-radius:var(--radius)}
  .vx-depot-tete h2{font-size:1.6rem}
}

.vx-depot-avert{max-width:1180px;margin:0 auto 16px;padding:12px 14px;
  background:#fdf3d7;border-radius:8px;
  font-size:.86rem;line-height:1.45;color:#6b5514}

/* Barre de compte */
.vroox-account-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:12px 14px;margin:0 0 18px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);font-size:.87rem;color:var(--ink-2)}
.vroox-account-bar a{font-weight:700}
.vroox-account-bar-guest{flex-direction:column;align-items:stretch;text-align:center;gap:11px}

/* Le formulaire dans une carte blanche, libellés en majuscules */
.job-manager-form{max-width:1180px;margin:0 auto;padding:20px 16px 22px;
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.job-manager-form fieldset{border:none;margin:0 0 18px;padding:0}
.job-manager-form label{display:block;margin-bottom:7px;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted)}
.job-manager-form .field{margin:0}
.job-manager-form input[type=text],
.job-manager-form input[type=number],
.job-manager-form input[type=email],
.job-manager-form select,
.job-manager-form textarea{width:100%;padding:13px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:1rem;background:var(--paper);color:var(--ink)}
.job-manager-form textarea{min-height:140px;line-height:1.5;resize:vertical}
.job-manager-form input:focus,.job-manager-form select:focus,.job-manager-form textarea:focus{
  outline:2px solid var(--rouge);outline-offset:-1px;background:#fff}
.job-manager-form small,.job-manager-form .description{display:block;margin-top:6px;
  font-size:.78rem;line-height:1.4;color:var(--muted)}

/* Champ fichier : le rendu brut du navigateur détonnait complètement */
.job-manager-form input[type=file]{width:100%;padding:10px;
  border:1px dashed var(--line);border-radius:8px;background:var(--paper);
  font-size:.83rem;color:var(--ink-2)}
.job-manager-form input[type=file]::file-selector-button{
  border:none;border-radius:6px;background:var(--rouge);color:#fff;
  font:inherit;font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;padding:9px 16px;margin-right:12px;cursor:pointer}
.job-manager-form input[type=file]::file-selector-button:hover{background:var(--rouge-fonce)}

/* Bouton d'envoi : pleine largeur, comme le « ENVOYER » de plansq */
.job-manager-form input[type=submit],
.job-manager-form button[type=submit]{width:100%;padding:16px;border:none;
  border-radius:10px;background:var(--rouge);color:#fff;
  font:inherit;font-weight:800;font-size:.95rem;text-transform:uppercase;
  letter-spacing:.8px;cursor:pointer;box-shadow:0 3px 12px rgba(245,54,92,.3);
  transition:background .15s,transform .1s}
.job-manager-form input[type=submit]:hover,
.job-manager-form button[type=submit]:hover{background:var(--rouge-fonce)}
.job-manager-form input[type=submit]:active,
.job-manager-form button[type=submit]:active{transform:scale(.99)}

/* ============================================================
   TABLEAU DE BORD DES ANNONCES (WP Job Manager)
   ============================================================ */

/* WP Job Manager marque son tableau de bord "alignwide", une classe que
   GeneratePress traite avec des marges négatives :
     .entry-content .alignwide { margin-left:-40px; width:calc(100% + 80px) }
   Le bloc débordait donc de 40 px à droite, et poussait la page en défilement
   horizontal. On neutralise cet alignement à l'intérieur de l'espace membre :
   nos conteneurs gèrent déjà leur propre largeur. */
.vx-dash-panel .alignwide,
.vx-dash-panel .alignfull,
.vx-vue .alignwide,
.vx-vue .alignfull{margin-left:0;margin-right:0;width:100%;max-width:100%}

/* Garde-fou général : aucun bloc du tableau de bord ne doit élargir la page. */
.vx-dash-panel{overflow-x:auto}
.vx-dash-panel > *{max-width:100%}

/* Barre du haut : recherche + bouton de dépôt, empilés sur mobile */
.jm-dashboard__intro{display:flex;flex-wrap:wrap;gap:11px;
  align-items:center;justify-content:space-between;margin-bottom:16px}
.jm-dashboard__filters{flex:1 1 190px;min-width:0}
.jm-dashboard__filters input[type=search]{width:100%;padding:11px 13px;
  border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.92rem;
  background:var(--paper);color:var(--ink)}
.jm-dashboard__filters input[type=search]:focus{outline:2px solid var(--rouge);
  outline-offset:-1px;background:#fff}
.jm-ui-button{display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;border-radius:8px;background:var(--rouge);color:#fff!important;
  font-weight:700;font-size:.86rem;white-space:nowrap}
.jm-ui-button:hover{background:var(--rouge-fonce);color:#fff!important}

/* État vide : un encart sobre, centré, qui tient dans la carte */
.jm-dashboard-empty{padding:26px 16px;text-align:center}
.jm-notice{max-width:100%;margin:0}
.jm-notice__message{font-size:.92rem;line-height:1.5;color:var(--ink-2)}

/* Le tableau des annonces doit défiler dans son cadre, jamais élargir la page */
.jm-dashboard-table{width:100%;overflow-x:auto}

/* Composant "notice" de WP Job Manager (ui.css) : il impose min-width:400px.
   Sur un téléphone de 360 px, dans une carte avec ses marges, l'encart
   « Tu n'as pas encore publié d'annonce » débordait de l'écran et son texte
   se trouvait coupé. type-dialog y ajoute un padding vertical énorme, d'où
   la grande boîte grise presque vide.
   Ces feuilles étant chargées après la nôtre, l'ordre est corrigé dans
   vroox-front.php ; ces règles ajustent le composant lui-même. */
.jm-notice{min-width:0;max-width:100%;margin:0}
.jm-notice.type-dialog{padding:24px 16px;gap:12px}
.jm-notice__message{font-size:.92rem;line-height:1.5;color:var(--ink-2);text-align:center}

/* Bouton "Signaler" de la barre d'actions : discret, mais lisible.
   Il porte son libellé — la cible d'un signalement doit être comprise avant
   d'être touchée, jamais devinée. Le défilement est adouci pour qu'on voie
   la page se déplacer plutôt que d'atterrir brutalement en bas. */
.vroox-act-signal{gap:7px;font-size:.8rem;font-weight:600;padding:0 14px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* Le formulaire visé ne doit pas se coller sous l'en-tête collant */
#signaler{scroll-margin-top:74px}

/* ============================================================
   MESSAGERIE
   Deux registres assumés :
   — la BOÎTE se lit comme une liste de courrier (expéditeur, aperçu, date).
     Elle annonce une correspondance, pas une conversation en direct.
   — le FIL garde les bulles : c'est ce qui rend un échange chaleureux.
   Aucun signal de temps réel (pas de « en train d'écrire », pas de
   rafraîchissement automatique) : la messagerie du site n'est pas le chat
   partenaire, et le laisser croire ne produirait que de la déception.
   ============================================================ */
.vx-boite{list-style:none;margin:0;padding:0;
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.vx-conv{display:flex;align-items:center;gap:12px;padding:13px 14px;
  border-bottom:1px solid var(--line);color:var(--ink)}
.vx-boite li:last-child .vx-conv{border-bottom:none}
.vx-conv:hover{background:var(--paper);color:var(--ink)}

.vx-conv-avatar,.vx-fil-avatar{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:var(--rouge);color:#fff;font-weight:800;font-size:1.1rem}
.vx-conv-avatar img,.vx-fil-avatar img{width:100%;height:100%;object-fit:cover}

.vx-conv-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vx-conv-haut{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vx-conv-nom{font-weight:700;font-size:.94rem;color:var(--sombre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-conv-haut time{flex:0 0 auto;font-size:.74rem;color:var(--muted)}
.vx-conv-apercu{font-size:.85rem;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Non lu : le nom passe en gras et l'aperçu s'assombrit, comme dans une
   boîte mail — le repère est immédiat sans ajouter de couleur criarde. */
.vx-conv.est-nonlu .vx-conv-nom{color:var(--rouge)}
.vx-conv.est-nonlu .vx-conv-apercu{color:var(--ink);font-weight:600}
.vx-conv-nb{flex:0 0 auto;background:var(--rouge);color:#fff;border-radius:999px;
  min-width:21px;height:21px;padding:0 7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums}

.vx-msg-vide{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:30px 18px;text-align:center}
.vx-msg-vide p{margin:0;font-weight:600;color:var(--sombre)}
.vx-msg-vide-aide{margin-top:7px!important;font-weight:400!important;
  font-size:.88rem;color:var(--muted)!important}

/* --- Le fil de conversation --- */
.vx-fil{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.vx-fil-tete{display:flex;align-items:center;gap:11px;padding:11px 14px;
  background:var(--sombre);color:#fff}
.vx-fil-retour{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:rgba(255,255,255,.13);color:#fff}
.vx-fil-retour:hover{background:rgba(255,255,255,.24);color:#fff}
.vx-fil-avatar{width:38px;height:38px;font-size:.95rem}
.vx-fil-nom{font-weight:700;font-size:1rem}

.vx-fil-corps{padding:16px 14px;display:flex;flex-direction:column;gap:9px;
  background:var(--paper);max-height:60vh;overflow-y:auto}
.vx-fil-debut{margin:0;text-align:center;font-size:.85rem;color:var(--muted)}
.vx-fil-jour{margin:8px 0 2px;text-align:center}
.vx-fil-jour span{background:rgba(30,34,48,.07);color:var(--ink-2);
  border-radius:999px;padding:3px 11px;font-size:.72rem;font-weight:600}

.vx-bulle{max-width:82%;align-self:flex-start;
  background:var(--card);border-radius:4px 14px 14px 14px;
  padding:11px 14px;box-shadow:var(--shadow)}
.vx-bulle p{margin:0;font-size:.94rem;line-height:1.45;overflow-wrap:anywhere}
.vx-bulle.est-moi{align-self:flex-end;background:var(--rouge);color:#fff;
  border-radius:14px 4px 14px 14px}

/* Composeur en forme de courrier : libellé, champ ample, bouton pleine
   largeur. Une barre de saisie avec sa flèche ronde annonce une réponse
   immédiate — ce que cette messagerie ne fera jamais. La forme doit dire
   la vérité du service, sinon chaque attente se lit comme une panne. */
.vx-fil-form{display:flex;flex-direction:column;gap:9px;padding:14px;
  border-top:1px solid var(--line);background:var(--card)}
.vx-fil-label{font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted)}
.vx-fil-form textarea{width:100%;min-height:88px;max-height:180px;
  padding:12px 13px;border:1px solid var(--line);border-radius:8px;
  font:inherit;line-height:1.45;resize:vertical;
  background:var(--paper);color:var(--ink)}
.vx-fil-form textarea:focus{outline:2px solid var(--rouge);outline-offset:-1px;background:#fff}
.vx-fil-form button{width:100%;padding:15px;border:none;border-radius:8px;
  background:var(--rouge);color:#fff;cursor:pointer;
  font:inherit;font-weight:800;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.7px;transition:background .15s}
.vx-fil-form button:hover{background:var(--rouge-fonce)}
.vx-fil-form button:active{transform:scale(.99)}

/* Qui parle, et depuis quand — au changement d'interlocuteur seulement */
.vx-bulle-qui{margin:6px 0 0;display:flex;align-items:baseline;gap:8px;
  font-size:.74rem;color:var(--muted)}
.vx-bulle-qui span{font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--sombre)}
.vx-bulle-qui.est-moi{justify-content:flex-end}

.vx-fil-note{margin:0;padding:10px 14px;background:var(--card);
  border-top:1px solid var(--line);
  font-size:.78rem;line-height:1.4;color:var(--muted);text-align:center}

/* ============================================================
   CONVERSATION PLEIN ÉCRAN
   Le fil occupe toute la hauteur entre l'en-tête et la barre d'onglets.
   Seule la zone des messages défile : le champ de saisie et l'en-tête de la
   conversation restent visibles en permanence.
   ============================================================ */
body.vx-conversation{overflow:hidden}
/* Les conteneurs du thème ajoutent leurs marges : on les neutralise ici,
   sinon le calcul de hauteur ci-dessous est faussé et la saisie sort du cadre. */
body.vx-conversation .site-content,
body.vx-conversation .entry-content,
body.vx-conversation .inside-article{padding:0;margin:0}
body.vx-conversation .vx-pied,
body.vx-conversation .vx-chat-banner{display:none}

body.vx-conversation .vx-fil{
  display:flex;flex-direction:column;overflow:hidden;
  /* dvh suit la barre d'adresse mobile qui se replie ; vh sert de repli
     pour les navigateurs qui ne le connaissent pas. */
  height:calc(100vh - var(--entete-h) - var(--tabbar-h));
  height:calc(100dvh - var(--entete-h) - var(--tabbar-h));
  border-radius:0;box-shadow:none;margin:0;max-width:none}
body.vx-conversation .vx-fil-corps{flex:1 1 auto;max-height:none;min-height:0}
body.vx-conversation .vx-fil-tete,
body.vx-conversation .vx-fil-form{flex:0 0 auto}
:root{--entete-h:57px}
@media (min-width:720px){
  /* Sur grand écran il n'y a pas de barre d'onglets */
  body.vx-conversation .vx-fil{height:calc(100vh - var(--entete-h));height:calc(100dvh - var(--entete-h))}
}

/* Le bouton d'envoi rond a été remplacé par un bouton "Répondre" pleine
   largeur (voir plus haut) : les dimensions de 44 px qui le verrouillaient
   ici écrasaient la nouvelle largeur et pliaient le libellé en colonne.
   Une seule définition du composeur, plus haut, fait autorité. */

/* iOS agrandit automatiquement la page dès qu'on touche un champ dont la
   police fait moins de 16 px. Il n'existe pas d'autre parade : user-scalable=no
   empêcherait aussi le zoom volontaire, ce qui exclut les personnes qui en ont
   besoin pour lire.
   Le !important est délibéré. Sans lui, la moindre règle de composant
   (.vx-fil-form textarea, 0-1-1) bat le sélecteur d'élément (0-0-1) et
   réintroduit le zoom — c'est exactement ce qui s'était produit sur le champ
   de la messagerie. C'est une contrainte du système, pas un choix de style :
   elle doit gagner partout, y compris sur ce que j'écrirai plus tard. */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=number],input[type=tel],input[type=url],select,textarea{font-size:16px!important}

/* En-tête de la page des conversations : même gabarit que les sections de
   l'espace membre, pour que les deux écrans se répondent. */
.vx-vue-tete{margin:0 0 14px}

/* Lien vers les messages plus anciens, en tête du fil */
.vx-fil-plus{margin:0 0 8px;text-align:center}
.vx-fil-plus a{display:inline-block;padding:7px 15px;border-radius:999px;
  background:rgba(30,34,48,.06);color:var(--ink-2);
  font-size:.79rem;font-weight:600}
.vx-fil-plus a:hover{background:var(--rouge-clair);color:var(--rouge)}
/* Le fil s'ouvre déjà positionné en bas : pas de défilement animé ici, qui
   ferait défiler l'écran sous les yeux à chaque ouverture. */
.vx-fil-corps{scroll-behavior:auto}

/* Les avatars sont rendus par vroox_avatar_html() : soit une image, soit une
   initiale. Les deux doivent remplir le cercle de la même façon. */
.vx-hub-avatar{overflow:hidden}
.vx-hub-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.vx-compte img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   PAGES "APPLICATION" — fond blanc continu
   ============================================================ */
body.vx-app{background:var(--card)}
/* Sur fond blanc, l'ombre ne détache plus rien : c'est un trait fin qui
   délimite les blocs, plus net et plus léger. */
body.vx-app .vx-dash-panel,
body.vx-app .vx-boite,
body.vx-app .vx-msg-vide{box-shadow:none;border:1px solid var(--line)}
/* Le contenu démarre directement sous la bannière */
body.vx-app .vx-vue,
body.vx-app .vx-hub{padding-top:14px}

/* ============================================================
   PHOTO DE PROFIL
   ============================================================ */
.vx-photo-intro{margin:0 0 16px;font-size:.9rem;line-height:1.5;color:var(--ink-2)}

.vx-photo-bloc{display:flex;align-items:center;gap:15px;
  padding:14px;margin:0 0 18px;
  background:var(--paper);border-radius:10px}
/* Aperçu au cadrage réel de l'avatar : rond et recadré. Un aperçu carré
   laisserait croire que toute l'image sera visible. */
.vx-photo-apercu{display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:var(--rouge);color:#fff;font-size:1.7rem;font-weight:800}
.vx-photo-apercu img{width:100%;height:100%;object-fit:cover;display:block}
.vx-photo-cote{min-width:0;flex:1}
.vx-photo-etat{margin:0;font-size:.88rem;line-height:1.45;color:var(--ink-2)}

/* Suppression : sobre, et rouge seulement au survol. Elle ne doit pas
   rivaliser avec l'action principale, qui est de mettre une photo. */
.vx-photo-suppr{margin:9px 0 0}
.vx-photo-suppr button{background:none;border:1px solid var(--line);
  color:var(--ink-2);border-radius:7px;padding:8px 14px;
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  text-transform:none;letter-spacing:0;transition:border-color .15s,color .15s}
.vx-photo-suppr button:hover{border-color:#b91c1c;color:#b91c1c;background:none}

.vx-photo-form label{display:block;margin-bottom:7px;
  font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted)}
.vx-photo-form small{display:block;margin:6px 0 12px;font-size:.79rem;color:var(--muted)}
.vx-photo-form input[type=file]{width:100%;padding:10px;
  border:1px dashed var(--line);border-radius:8px;background:var(--paper);color:var(--ink-2)}
.vx-photo-form input[type=file]::file-selector-button{
  border:none;border-radius:6px;background:var(--rouge);color:#fff;
  font:inherit;font-size:.82rem;font-weight:700;padding:9px 15px;
  margin-right:12px;cursor:pointer}
.vx-photo-form button[type=submit]{width:100%;padding:14px;border:none;
  border-radius:8px;background:var(--rouge);color:#fff;
  font:inherit;font-weight:800;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.6px;cursor:pointer}
.vx-photo-form button[type=submit]:hover{background:var(--rouge-fonce)}

/* ============================================================
   PAGE ANNONCE — GRAND ÉCRAN
   Tout ce bloc est sous min-width : le rendu mobile n'est pas touché.

   Sur ordinateur, la page empilait des éléments taillés pour un téléphone :
   une photo perdue en haut à gauche, le titre loin en dessous, puis la carte
   de contact tout en bas — il fallait défiler pour écrire à quelqu'un dont
   on venait de voir le visage.

   Deux colonnes : la photo à gauche, qui reste en place pendant la lecture,
   et tout le reste à droite. La grille est posée sur .inside-article et non
   sur .entry-content, parce que GeneratePress rend l'image dans .featured-image,
   qui est SŒUR de .entry-content et non son enfant.
   ============================================================ */
@media (min-width:900px){
  .single-job_listing .inside-article{
    max-width:1180px;margin:0 auto;padding:26px 14px;
    display:grid;grid-template-columns:340px minmax(0,1fr);
    column-gap:36px;align-items:start}

  .single-job_listing .featured-image{
    grid-column:1;grid-row:1;margin:0;
    position:sticky;top:88px}
  .single-job_listing .featured-image img{
    width:100%;height:auto;display:block;
    border-radius:var(--radius);box-shadow:var(--shadow-lg)}

  /* max-width:720px vient de la règle mobile plus haut : dans une colonne de
     grille elle n'a plus lieu d'être, c'est la grille qui borne la largeur. */
  .single-job_listing .entry-content{grid-column:2;grid-row:1;padding:0;max-width:none;margin:0}

  /* Les blocs internes reprennent la largeur de la colonne : leurs marges
     automatiques étaient calculées pour une pleine largeur d'écran. */
  .single-job_listing .vroox-breadcrumb,
  .single-job_listing .vroox-actionbar,
  .single-job_listing .vroox-annonce-titre,
  .single-job_listing .vroox-geo-mesh,
  .single-job_listing .vroox-public{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}

  .single-job_listing .vroox-annonce-titre{font-size:2rem;margin-top:12px}

  /* La carte de contact et le bouton du chat gardent une largeur lisible :
     un bouton de 700 px de large ne se lit plus comme un bouton. */
  .vroox-voies{max-width:520px;margin:22px 0 0}
  .vroox-mpcarte{border-radius:var(--radius)}
  .vroox-chat-bloc{max-width:520px}

  /* Le bouton flottant ne doit pas coller au bord sur grand écran. */
  .vx-fab{bottom:26px;right:26px}
}