/* =====================================================================
   MENU-REJOINDRE 20261018-m — menu du site public (décisions de Robin du 18/10/2026 : D3, D5, D6)
   Logo dans la pilule claire, 6 liens, bouton or « Nous rejoindre » et son panneau (ordinateur, > 1 280 px),
   accordéon « Nous rejoindre » dans le volet crème (téléphone et tablette, burger ≤ 1 280 px, comme avant).
   Le panneau et l'accordéon sont dans le HTML : fermés, ils sont masqués ici (display:none, hors tabulation).
   Spécificité : nav.css pose ses règles en !important (0-2-0) ; celles qu'il faut battre ici sont en 0-3-0 !important.
   ===================================================================== */
:root {
  --mr-encre: #091C3B;
  --mr-nuit: #071530;
  --mr-or: #C9A84C;
  --mr-or-clair: #E2C977;
  --mr-or-texte: #7A5C14;
  --mr-or-fonce: #8A6A1F;
  --mr-creme: #FFFDF7;
  --mr-creme-2: #F6F0DE;
  --mr-pastille: #F6EBCB;
  --mr-ligne: #EFE6CC;
  --mr-gris: #5B6780;
  --mr-gris-clair: #C9D2E3;
  --mr-duree: 160ms;
}

/* ---------- Logo dans la pilule (lien vers l'accueil de la langue) ---------- */
.mr-logo { display: inline-flex; align-items: center; flex: none; border-radius: 10px; }
.mr-logo-forme { display: block; line-height: 0; }
.mr-logo-forme img { display: block; width: 119px; height: 34px; }
.nav-wrap .nav .nav-center { align-items: center !important; }
.nav-wrap .nav-center .mr-logo { padding-right: 16px; margin-right: 2px; border-right: 1px solid rgba(9, 28, 59, 0.12); }
.mobile-drawer-top .mr-logo--volet .mr-logo-forme img { width: 126px; height: 36px; }
/* Le fichier officiel est or (#B89968, 2,6:1 sur la pilule) : sa forme est peinte à l'encre de la charte (#091C3B, 16:1).
   Sans masque CSS, l'image or reste visible telle quelle. */
@supports ((-webkit-mask-image: url("/assets/logo/logo-lockup-gold.svg")) or (mask-image: url("/assets/logo/logo-lockup-gold.svg"))) {
  .mr-logo-forme {
    background-color: var(--mr-encre);
    -webkit-mask: url("/assets/logo/logo-lockup-gold.svg") center / contain no-repeat;
    mask: url("/assets/logo/logo-lockup-gold.svg") center / contain no-repeat;
  }
  .mr-logo-forme img { opacity: 0; }
}
.mr-logo:focus-visible { outline: 2px solid #091C3B; box-shadow: 0 0 0 8px #FFFFFF; outline-offset: 4px; }

/* ---------- Bouton « Nous rejoindre » (barre d'ordinateur) ---------- */
.nav-wrap .nav-right .mr-zone { order: -1; display: inline-flex; align-items: center; }
.mr-bouton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--mr-or); border-radius: 999px; background: var(--mr-creme); color: var(--mr-encre);
  font: 600 13.5px/1 'Inter', system-ui, -apple-system, sans-serif; white-space: nowrap; cursor: pointer;
  transition: background var(--mr-duree), box-shadow var(--mr-duree);
}
/* Fond plein clair par défaut : les landings ont un héros sombre SANS la classe theme-no-image (leur « Se connecter »
   y est déjà peu lisible, défaut existant) ; le bouton reste lisible sur tous les fonds (#091C3B sur #FFFDF7 = 16:1). */
.mr-bouton:hover, .mr-zone.mr-ouvert .mr-bouton { background: var(--mr-pastille); }
.mr-bouton--actif { box-shadow: inset 0 0 0 1px var(--mr-or); }
.mr-bouton:focus-visible { outline: 2px solid #091C3B; box-shadow: 0 0 0 8px #FFFFFF; outline-offset: 3px; }
.mr-bouton .mr-svg { transition: transform var(--mr-duree); }
.mr-zone.mr-ouvert .mr-bouton .mr-svg { transform: rotate(180deg); }
body.theme-no-image .nav-wrap:not(.scrolled) .mr-bouton { color: #FFFFFF; background: rgba(201, 168, 76, 0.18); }
body.theme-no-image .nav-wrap:not(.scrolled) .mr-bouton:hover, body.theme-no-image .nav-wrap:not(.scrolled) .mr-zone.mr-ouvert .mr-bouton { background: rgba(201, 168, 76, 0.3); }

/* ---------- Panneau ---------- */
.mr-panneau {
  display: none; position: fixed; z-index: 120; top: var(--mr-haut, 86px); left: 50%; transform: translateX(-50%);
  width: min(1040px, calc(100vw - 32px));
  background: var(--mr-creme); color: var(--mr-encre); border: 1px solid var(--mr-ligne); border-radius: 24px;
  box-shadow: 0 2px 6px rgba(6, 18, 43, 0.12), 0 30px 70px rgba(6, 18, 43, 0.35);
  font-family: 'Inter', system-ui, -apple-system, sans-serif; text-align: left;
}
.mr-zone.mr-ouvert .mr-panneau,
.mr-zone:not(.mr-pret):hover .mr-panneau,
.mr-zone:not(.mr-pret):focus-within .mr-panneau { display: block; animation: mr-entree var(--mr-duree) ease-out; }
@keyframes mr-entree { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mr-defile { max-height: calc(100vh - var(--mr-haut, 86px) - 16px); overflow: auto; border-radius: 23px; }
.mr-grille { display: grid; grid-template-columns: 1.12fr 1fr 0.98fr; gap: 22px; padding: 26px 26px 22px; }
.mr-titre-col { margin: 0; padding: 0 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mr-or-texte); }
.mr-liste { list-style: none; margin: 0; padding: 0; }
.mr-col--metiers { border-left: 1px solid var(--mr-ligne); padding-left: 18px; }
.mr-item, .mr-metier { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; color: var(--mr-encre); text-decoration: none; }
.mr-metier { gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; }
.mr-item:hover, .mr-metier:hover, .mr-actif { background: var(--mr-creme-2); }
.mr-item:focus-visible, .mr-metier:focus-visible, .mr-cta:focus-visible, .mr-bas a:focus-visible { outline: 2px solid #091C3B; box-shadow: 0 0 0 8px #FFFFFF; outline-offset: 2px; }
.mr-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--mr-pastille); color: var(--mr-or-texte); }
.mr-ico-m { display: flex; flex: none; color: var(--mr-or-texte); }
.mr-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mr-nom { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.mr-sous { font-size: 13.5px; line-height: 1.45; color: var(--mr-gris); }
.mr-metier .mr-txt { gap: 1px; }
.mr-metier .mr-nom { font-size: 14.5px; }
.mr-metier .mr-sous { font-size: 12.5px; }
.mr-fl { display: flex; color: #B9AE90; }
.mr-carte { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 18px; background: var(--mr-nuit); color: #FFFFFF; }
.mr-carte-kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mr-or-clair); }
.mr-carte-titre { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; }
.mr-carte-titre em { display: block; font-style: italic; color: var(--mr-or-clair); }
.mr-carte-texte { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mr-gris-clair); }
.mr-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--mr-or); color: var(--mr-encre); font-size: 14px; font-weight: 600; text-decoration: none; }
.mr-cta:hover { background: #E3C26A; }
.mr-reunion { display: flex; gap: 8px; align-items: center; margin: 0; padding-top: 12px; border-top: 1px solid rgba(201, 210, 227, 0.2); font-size: 13px; line-height: 1.45; color: var(--mr-gris-clair); }
.mr-reunion[hidden] { display: none; }
.mr-reunion-ico { display: flex; color: var(--mr-or-clair); }
.mr-reunion-lien { color: inherit; text-decoration: underline; text-decoration-color: rgba(226, 201, 119, 0.5); text-underline-offset: 3px; }
.mr-reunion-lien:hover { color: #FFFFFF; }
.mr-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 14px 38px; background: var(--mr-creme-2); font-size: 13.5px; }
.mr-bas-pro { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--mr-encre); text-decoration: none; }
.mr-bas-aide { color: var(--mr-gris); }
.mr-bas-aide a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mr-panneau::before { content: ""; position: absolute; top: -7px; left: var(--mr-fleche, 50%); width: 14px; height: 14px; margin-left: -7px; background: var(--mr-creme); border-left: 1px solid var(--mr-ligne); border-top: 1px solid var(--mr-ligne); transform: rotate(45deg); }

/* ---------- Barre resserrée de 1 281 à 1 439 px ----------
   Mesuré le 18/10 (outils/sonde-largeur-barre.mjs) : sans ce resserrage, les liens débordaient de la pilule à 1 281 px en
   fr, es, de, pt, nl (jusqu'à 139 px en espagnol) — l'ancien menu débordait déjà, jusqu'à 177 px. */
@media (min-width: 1281px) and (max-width: 1439px) {
  .nav-wrap .nav .nav-center { gap: 12px !important; padding: 8px 14px !important; }
  .nav-wrap .nav .nav-center .nav-link { font-size: 12.5px !important; }
  .nav-wrap .nav-center .mr-logo { padding-right: 12px; }
  .nav-wrap .nav-center .mr-logo-forme img { width: 98px; height: 28px; }
  .nav-wrap .nav .nav-right { gap: 10px !important; }
  .nav-wrap .nav .nav-right .nav-cta { padding: 10px 14px !important; }
  .mr-bouton { padding: 0 12px; }
}

/* ---------- Tablette et téléphone : burger (≤ 1 280 px, inchangé), pilule réduite au logo ---------- */
@media (max-width: 1280px) {
  .nav-wrap .nav-right .mr-zone { display: none; }
  .nav-wrap .nav .nav-center { display: flex !important; flex-shrink: 0 !important; align-items: center !important; gap: 0 !important; padding: 7px 14px !important; }
  .nav-wrap .nav .nav-center > .nav-link { display: none !important; }
  .nav-wrap .nav-center .mr-logo { padding-right: 0; margin-right: 0; border-right: 0; }
}
/* Téléphone : la rangée (choix de langue, « S'inscrire », burger) ne laisse que ~45 px : le sceau officiel seul, sur une
   pastille claire ; le logo complet est dans le volet crème. */
@media (max-width: 640px) {
  .nav-wrap .nav .nav-center { padding: 5px !important; border-radius: 50% !important; }
  .nav-wrap .nav-center .mr-logo-forme img { width: 32px; height: 32px; object-fit: contain; }
}
@supports ((-webkit-mask-image: url("/assets/logo/logo-seal.svg")) or (mask-image: url("/assets/logo/logo-seal.svg"))) {
  @media (max-width: 640px) {
    .nav-wrap .nav-center .mr-logo-forme { -webkit-mask-image: url("/assets/logo/logo-seal.svg"); mask-image: url("/assets/logo/logo-seal.svg"); }
  }
}

/* ---------- Accordéon du volet ---------- */
.mobile-drawer-links .mr-acc { margin: 20px 0 0; padding: 14px 16px 16px; border: 1.5px solid var(--mr-or); border-radius: 20px; background: #FFFCF3; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.mr-acc-bouton { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--mr-or-fonce); font: 500 22px/1.2 'Inter', system-ui, -apple-system, sans-serif; cursor: pointer; text-align: left; }
.mr-acc-bouton:focus-visible { outline: 2px solid #091C3B; box-shadow: 0 0 0 8px #FFFFFF; outline-offset: 4px; border-radius: 8px; }
.mr-acc-bouton .mr-svg { transition: transform var(--mr-duree); }
.mr-acc.mr-ouvert .mr-acc-bouton .mr-svg { transform: rotate(180deg); }
.mr-acc-corps { display: none; padding-top: 8px; }
.mr-acc.mr-ouvert .mr-acc-corps, .mr-acc:not(.mr-pret) .mr-acc-corps { display: block; }
.mr-acc-liste, .mr-acc-metiers { list-style: none; margin: 0; padding: 0; }
.mobile-drawer-links .mr-acc a { display: flex; gap: 12px; align-items: center; justify-content: flex-start; padding: 9px 0; border: 0; border-radius: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: var(--mr-encre); background: transparent; transition: none; }
.mobile-drawer-links .mr-acc a:hover, .mobile-drawer-links .mr-acc a.mr-actif { padding-left: 0; color: var(--mr-encre); }
.mobile-drawer-links .mr-acc a .mr-svg { width: auto; height: auto; opacity: 1; color: inherit; transform: none; }
.mobile-drawer-links .mr-acc .mr-ico { width: 38px; height: 38px; border-radius: 11px; }
.mobile-drawer-links .mr-acc .mr-nom { font-size: 15.5px; font-weight: 600; }
.mobile-drawer-links .mr-acc .mr-sous { font-size: 12.5px; line-height: 1.4; }
.mr-acc .mr-titre-col { padding: 14px 0 10px; font-size: 10.5px; }
.mr-acc-metiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-drawer-links .mr-acc .mr-acc-metier { gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #EAE1C8; border-radius: 12px; background: #FFFFFF; font-size: 14px; }
.mobile-drawer-links .mr-acc .mr-acc-metier.mr-actif { border-color: var(--mr-or); background: var(--mr-creme-2); }
.mobile-drawer-links .mr-acc .mr-acc-cta { justify-content: center; margin-top: 16px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--mr-encre); color: #FFFFFF; font-size: 15px; font-weight: 600; }
.mobile-drawer-links .mr-acc a:focus-visible { outline: 2px solid #091C3B; box-shadow: 0 0 0 8px #FFFFFF; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mr-zone.mr-ouvert .mr-panneau, .mr-zone:not(.mr-pret):hover .mr-panneau, .mr-zone:not(.mr-pret):focus-within .mr-panneau { animation: none; }
  .mr-bouton, .mr-bouton .mr-svg, .mr-acc-bouton .mr-svg { transition: none; }
}