/* =====================================================================
   WorkDispo — style 2026 commun à tout le site (demande de Sam du 22/09/2026)
   Issu de la refonte de l'accueil (maquette « Accueil WorkDispo 2026 ») :
   1. polices : IBM Plex Sans (texte, champs, boutons) et Space Grotesk (titres h1–h6),
   2. en-tête partagé (templates/common/header.html.twig) : barre collante et translucide,
      liens du menu, boutons visiteur (contour / « S'inscrire » plein), ordre de la maquette,
   3. pied de page partagé (templates/common/footer.html.twig).
   Chargée par toutes les mises en page qui utilisent le thème Hireo (style.min.css) :
   base, dashboard_base, dashboard_base_new_account(_society), annonce/recherche,
   formation/recherche, formation/show, auth/register_freelance_new, auth/register_society_new.
   Le thème reste chargé ; cette feuille ne fait que le surcharger, sans !important sauf
   là où le thème en met déjà un.
   ===================================================================== */

/* ---------- Jetons ---------- */
:root {
  --wd-ink: #0F1836;
  --wd-ink-2: #33405C;
  --wd-text: #4C5772;
  --wd-muted: #5A6685;
  --wd-blue: #2A41E8;
  --wd-blue-dark: #1E31C0;
  --wd-line: #E4E8F2;
  --wd-bg-blue: #F3F6FF;
  --wd-navy: #111A33;
  --wd-font-head: 'Space Grotesk', 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --wd-font-body: 'IBM Plex Sans', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Polices (mêmes sélecteurs que le thème, spécificité juste au-dessus : body → html body, h1 → body h1) ---------- */
html body, html body .pac-container, body .headwrap, body .headwrap-a,
body input[type="text"], body input[type="password"], body input[type="email"], body input[type="number"], body input[type="tel"],
body input[type="search"], body input[type="url"], body textarea, body select, body button, body input[type="button"], body input[type="submit"] {
  font-family: var(--wd-font-body);
}
html body { -webkit-font-smoothing: antialiased; }
body h1, body h2, body h3, body h4, body h5, body h6 { font-family: var(--wd-font-head); }

/* ---------- En-tête partagé ---------- */
#header-container {
  /* Position : celle du thème (absolute, puis fixed posé par custom.js au load) — pas de sticky, sinon l’en-tête entre dans le flux
     sous le padding-top de #wrapper et saute de 82 px au load (défaut vu par Sam le 22/09). */
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(16,24,48,.05), 0 10px 28px rgba(16,24,48,.05);
}
#header { background: transparent; box-shadow: none; font-family: var(--wd-font-head); }
#header .right-side { background: transparent; }
#logo { padding-right: 12px; margin-right: 8px; }
/* Boutons de droite aérés (8 px, 11 px à partir de 1 400 px) tout en tenant à 1 280 px sans chevaucher le menu. */
.header-widget { padding: 0 8px !important; margin-left: 0; }
@media (min-width: 1400px) { .header-widget { padding: 0 11px !important; } }
/* Ordre de la maquette : « Se connecter » puis « S'inscrire » tout à droite. Le thème flotte déjà le dernier widget (connexion) à droite ;
   on flotte aussi celui de l'inscription, qui le précède dans le HTML et se place donc à sa droite. */
.header-widget:last-of-type { margin-right: 0; padding-right: 8px !important; }
@media (min-width: 1400px) { .header-widget:last-of-type { padding-right: 11px !important; } }
.header-widget:has(> a.log-in-button[href$="/inscription"]) { float: right; margin-right: 0; padding-right: 0 !important; }
#navigation > ul > li > a {
  font-size: 14.5px; font-weight: 500; color: var(--wd-ink-2); padding: 8px 11px; border-radius: 10px; transition: background .18s ease, color .16s ease;
}
#navigation > ul > li > a:not(.button):hover { background: #F2F4FC; color: var(--wd-blue); }
/* Membres : les entrées du menu sont des boutons du thème (fond bleu, texte blanc en ligne) : on ne les touche pas. */
#navigation > ul > li > a.button { border-radius: 2rem; }
#navigation > ul > li > a::after, #navigation > ul > li > a::before { display: none !important; }
/* Gabarits de la maquette : contour 10/16, « Se connecter » 10/14, « S'inscrire » 12/20, police 14,5 px, même interligne pour les trois. */
.header-widget > .button,
.header-widget > a.button {
  display: inline-flex; align-items: center; margin: 0; padding: 10px 16px; border-radius: 12px; width: auto;
  font-family: var(--wd-font-head); font-size: 14.5px; font-weight: 600; line-height: 1.25; white-space: nowrap;
  color: var(--wd-blue) !important; background: var(--wd-bg-blue); border: 1px solid #C6D1FA; box-shadow: 0 1px 2px rgba(42,65,232,.06);
}
.header-widget > .button:hover, .header-widget > a.button:hover { background: #fff; border-color: var(--wd-line); color: var(--wd-ink-2) !important; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16,24,48,.10); }
.header-widget .log-in-button { font-family: var(--wd-font-head); font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--wd-ink) !important; padding: 10px 14px; border-radius: 12px; white-space: nowrap; }
.header-widget .log-in-button:hover { color: var(--wd-blue) !important; background: #F2F4FC; }
.header-widget .log-in-button i { display: none; }
/* « S'inscrire » : bouton principal (lien d'inscription du thème) */
.header-widget a.log-in-button[href$="/inscription"] {
  color: #fff !important; padding: 12px 20px; background: linear-gradient(180deg, #4055F0, #2436CE);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 20px rgba(42,65,232,.34);
}
.header-widget a.log-in-button[href$="/inscription"]:hover { background: linear-gradient(180deg, #2F45E4, #1B2BB5); color: #fff !important; }
/* Mobile (widget hide-on-large du thème) : le « S'inscrire » reste le bouton principal, comme sur grand écran. */
.header-widget.hide-on-large > a.button[href$="/inscription"] {
  color: #fff !important; border-color: transparent; background: linear-gradient(180deg, #4055F0, #2436CE);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 20px rgba(42,65,232,.34);
}
.header-widget.hide-on-large > a.button[href$="/inscription"]:hover { background: linear-gradient(180deg, #2F45E4, #1B2BB5); color: #fff !important; border-color: transparent; }
/* Sous 1 400 px (portables 1 280/1 366) : mêmes proportions, un cran plus compact pour ne pas chevaucher le menu. */
@media (max-width: 1399px) {
  .header-widget > .button, .header-widget > a.button { font-size: 14px; padding: 10px 13px; }
  .header-widget .log-in-button { font-size: 14px; padding: 10px 11px; }
  .header-widget a.log-in-button[href$="/inscription"] { padding: 12px 17px; }
}

/* ---------- Pied de page partagé ---------- */
#footer {
  position: relative; margin-top: 0; padding-top: 0; color: #B9C4DC; background: var(--wd-navy); border-radius: 44px 44px 0 0; overflow: hidden;
  box-shadow: 0 -18px 50px rgba(15,24,54,.18); font-family: var(--wd-font-body);
}
#footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); }
#footer::after { content: ''; position: absolute; top: -190px; left: 50%; transform: translateX(-50%); width: 760px; height: 380px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(42,65,232,.4), transparent 70%); }
#footer .footer-top-section { border: 0; }
/* Pas de mot-symbole ici (doublon avec le « WorkDispo » en texte, demande de Sam du 21/09). */
#footer .footer-rows-container { height: auto; line-height: 1.2; padding: 56px 0 0; }
/* !important sur police et casse : les gabarits offre, profil, annonce, formation/show forcent h3/h4 en Nunito !important pour leur contenu. */
#footer .footer-rows-container h4 { font-family: var(--wd-font-head) !important; font-size: 19px; font-weight: 700; color: #fff; margin: 0; }
#footer .footer-middle-section { padding: 34px 0 24px; }
#footer .footer-links h3 { font-family: var(--wd-font-head) !important; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase !important; color: #8A99BC; margin: 0 0 16px; }
#footer .footer-links ul li a { color: #CBD5EC; font-size: 15px; line-height: 1.5; padding: 5px 0; }
#footer .footer-links ul li a:hover { color: #fff; }
#footer .footer-links ul li a span { color: inherit; }
#footer .footer-bottom-section { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); text-align: left; font-size: 14px; color: #A9B6D2; }
#footer .footer-bottom-section strong { color: #fff; }
#footer .footer-bottom-section a { color: #A9B6D2; }
#footer .footer-bottom-section a:hover { color: #fff; }
#footer .footer-bottom-section a span { color: inherit; }
@media (max-width: 767px) {
  #footer { border-radius: 28px 28px 0 0; }
}