/* ================================================================
   RU Carrière : page /off/ (Livraison 6, 18 octobre 2026)
   En-tête (style du Bottin, Correctif design 16), outils du logiciel dans la barre des filtres, cartes et
   fenêtres propres à RU Carrière. La rangée d'onglets, la barre, la
   fenêtre « Filtres » et la carte standard viennent de RU Design
   (composant 22 : filtres.css, carte.css).
   Maquette approuvée : maquette-filtres-carriere-bottin.html.
   Remplace les deux blocs <style> écrits dans la page (Google Fonts et
   une quarantaine de déclarations forcées retirées). Couleurs : jetons --ru-*.
   ================================================================ */

/* ---- En-tête au style du Bottin (Correctif design 16, 20 octobre 2026) ----
   Demande de Dany : RU Carrière et le Bottin ont le même début de page. Valeurs
   reprises du bloc .cover du Bottin (rub-skin.css), comme avant la Livraison 6.
   Polices servies par le site (fichiers de RU Design, licence libre OFL) :
   aucun appel à un service extérieur. */
@font-face{font-family:"RU Serif";font-style:normal;font-weight:600;font-display:swap;src:url(../../../ru-design/assets/polices/fraunces-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"RU Texte";font-style:normal;font-weight:400;font-display:swap;src:url(../../../ru-design/assets/polices/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"RU Texte";font-style:normal;font-weight:500;font-display:swap;src:url(../../../ru-design/assets/polices/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"RU Texte";font-style:normal;font-weight:600;font-display:swap;src:url(../../../ru-design/assets/polices/archivo-latin-600-normal.woff2) format("woff2")}
#ruof-cover{--dark:#0e2438;--onDark:#f1f4f2;--onDarkMut:#e6ecf2;--brand:#12304d;--brand2:#1d5c8f;--brand3:#5fa8dc;--serif:"Fraunces","RU Serif",Georgia,serif;--sans:"Archivo","RU Texte",system-ui,sans-serif;--mono:Arial,"Helvetica Neue",Helvetica,sans-serif;--e:cubic-bezier(.22,.68,.24,1);--sm:9px;--md:13px;--pad:clamp(16px,4vw,44px);font-family:var(--sans)}
#ruof-cover *{box-sizing:border-box}
#ruof-cover a{color:inherit;text-decoration:none}
#ruof-cover .wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
#ruof-cover .eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase}
#ruof-cover .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-family:inherit;font-weight:600;font-size:13.5px;border:0;cursor:pointer;border-radius:var(--sm);padding:11px 18px;white-space:nowrap;transition:background .24s var(--e),color .24s var(--e),border-color .24s var(--e)}
#ruof-cover .btn-brand{background:var(--brand2);color:#fff}
#ruof-cover .btn-brand:hover{background:var(--brand)}
#ruof-cover .btn-light{background:var(--onDark);color:var(--brand)}
#ruof-cover .btn-light:hover{background:#fff}
#ruof-cover .btn:focus-visible,#ruof-cover .mainnav a:focus-visible{outline:2px solid var(--brand3);outline-offset:2px}
#ruof-cover .brand{display:inline-flex;align-items:center;gap:10px;min-height:44px}
#ruof-cover .brandlogo{height:26px;width:auto;display:block}
#ruof-cover .cover{position:relative;background:var(--dark);color:var(--onDark);overflow:hidden}
#ruof-cover .cover::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 460px at 78% -12%,rgba(95,168,220,.20),transparent 62%),radial-gradient(700px 380px at 6% 108%,rgba(29,92,143,.34),transparent 66%)}
#ruof-cover .gtex{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(900px 460px at 70% 0%,#000,transparent 72%);mask-image:radial-gradient(900px 460px at 70% 0%,#000,transparent 72%)}
#ruof-cover .cover .wrap{position:relative;z-index:2}
#ruof-cover .topbar{display:flex;align-items:center;gap:26px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1)}
#ruof-cover .mainnav{display:flex;gap:4px;flex-wrap:wrap}
#ruof-cover .mainnav a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:500;color:var(--onDarkMut);padding:8px 12px;border-radius:7px;transition:.22s var(--e)}
#ruof-cover .mainnav a:hover,#ruof-cover .mainnav a.on{color:var(--onDark);background:rgba(255,255,255,.08)}
#ruof-cover .navact{margin-left:auto;display:flex;align-items:center;gap:14px}
#ruof-cover .cgrid{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:56px;padding:50px 0 42px;align-items:start}
#ruof-cover .tagline{color:var(--brand3);margin:0 0 16px}
#ruof-cover .cover h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.8vw,64px);line-height:.97;letter-spacing:-.028em;margin:0;padding:0;text-wrap:balance;font-optical-sizing:auto;color:var(--onDark)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){#ruof-cover .cover h1{background:linear-gradient(96deg,var(--onDark) 40%,var(--brand3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}}
#ruof-cover .lede{color:var(--onDarkMut);font-size:16.5px;line-height:1.55;margin:20px 0 0;max-width:58ch}
#ruof-cover .bigsearch{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--md);padding:8px 8px 8px 18px;margin:26px 0 0;max-width:640px;transition:border-color .24s var(--e),background .24s var(--e)}
#ruof-cover .bigsearch:focus-within{border-color:var(--brand3);background:rgba(255,255,255,.11)}
#ruof-cover .bigsearch svg{width:20px;height:20px;color:var(--onDarkMut);flex:none}
#ruof-cover .bigsearch:focus-within svg{color:var(--brand3)}
#ruof-cover .bigsearch input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;outline:0;box-shadow:none;margin:0;padding:0;color:var(--onDark);font-family:inherit;font-size:16px}
#ruof-cover .bigsearch input::placeholder{color:var(--onDarkMut)}
#ruof-cover .cstats{border-left:1px solid rgba(255,255,255,.13);padding-left:26px}
#ruof-cover .cstat{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.09)}
#ruof-cover .cstat:last-child{border-bottom:0}
#ruof-cover .cstat b{display:block;font-family:var(--serif);font-weight:600;font-size:32px;line-height:1;font-variant-numeric:tabular-nums;color:var(--onDark)}
#ruof-cover .cstat span{font-size:12.5px;color:var(--onDarkMut)}
@media (max-width:860px){
	#ruof-cover .cgrid{grid-template-columns:minmax(0,1fr);gap:32px}
	#ruof-cover .cstats{border-left:0;border-top:1px solid rgba(255,255,255,.13);padding-left:0;padding-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
	#ruof-cover .cstat{border-bottom:0}
}
@media (max-width:600px){
	#ruof-cover .mainnav{display:none}
	#ruof-cover .bigsearch{padding-left:12px}
	#ruof-cover .bigsearch .btn{padding:11px 14px}
}
/* Téléphone avec la barre du Réseau : la barre du haut de l'en-tête répète la
   barre du Réseau (règle « une destination, une seule place »). */
@media (max-width:999px){
	body:has(.rud-barre-bt) #ruof-cover .topbar{display:none}
	body:has(.rud-barre-bt) #ruof-cover .cgrid{padding-top:28px}
}
/* L'en-tête a sa propre barre (logo, navigation, bouton) : l'ancienne barre
   foncée de la page (.off-nav) ferait un deuxième menu. */
body:has(#ruof-cover) .off-nav{display:none}

/* ---- Contenu sous l'en-tête : même largeur que le Bottin, plus collé aux bords ---- */
#ruof-app{background:var(--ru-surface,#F6F6F4)}
#ruof-app .ruof-corps{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,44px) 8px}
/* Téléphone : la barre des filtres et la grille ont déjà leur marge (une seule marge). */
@media (max-width:600px){#ruof-app .ruof-corps{padding-left:0;padding-right:0}#ruof-app .ao-bar{margin:12px 16px 0}}

/* ---- Bandeaux d'accès : sous l'en-tête, dans la largeur du contenu ---- */
#ruof-app .ao-bar{margin:16px 0 0}
#ruof-app .ao-bar-ico svg{width:16px;height:16px}

/* ---- Zone des filtres (RU Design) sur fond clair, comme la maquette ---- */
#ruof-app .ru-filtres{background:var(--ru-surface,#F6F6F4)}
#ruof-app .ru-filtres-onglets-zone{border-radius:0}
#ruof-app .ru-filtres .ruof-outil{min-height:48px;padding:0 18px;border-radius:12px;font-size:15px}
#ruof-app .ru-filtres .ruof-outil[hidden]{display:none}
#ruof-app .ru-filtres .ruof-outil svg{width:18px;height:18px}
/* Talents : seule la recherche s'applique (pas de filtres ni de tri d'offres). */
#ruof-app .ru-filtres.ruof-mode-talents .ru-filtres-bouton,
#ruof-app .ru-filtres.ruof-mode-talents .ru-filtres-tri,
#ruof-app .ru-filtres.ruof-mode-talents .ru-filtres-actifs{display:none}
@media (max-width:640px){
	/* Téléphone : Filtres et tri sur une ligne, les boutons du logiciel sur la suivante. */
	#ruof-app .ru-filtres .ruof-outil{flex:1 1 40%;min-width:0}
}

/* ---- Filtres propres à une catégorie (dans la fenêtre) ---- */
.ru-filtres-fenetre .ruof-fl-specifiques{display:flex;flex-direction:column;gap:14px;margin-top:14px;padding:14px;border:1px solid var(--ru-accent-filet,rgba(44,111,181,.45));border-radius:12px;background:var(--ru-accent-doux,rgba(44,111,181,.12))}
.ru-filtres-fenetre .ruof-fl-specifiques[hidden]{display:none}
.ru-filtres-fenetre .ruof-fl-spec-titre{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--ru-texte,#0e2438)}
.ru-filtres-fenetre .ruof-fl-specifiques input[type="number"],.ru-filtres-fenetre .ruof-fl-specifiques input[type="date"]{box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:0 12px;border:1px solid var(--ru-bord-2,rgba(0,0,0,.16));border-radius:10px;background:var(--ru-fond,#FFFFFF);color:var(--ru-texte,#0e2438);font-family:inherit;font-size:16px}

/* ---- Résultats : grille des cartes standard ---- */
#ruof-app #ruof-r{max-width:none;margin:0;padding:0;background:transparent}
#ruof-app #ruof-r .ru-cartes{padding-top:2px}
#ruof-app .ru-carte{cursor:pointer}
#ruof-app .ruof-fav{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ru-discret,#6b7280);cursor:pointer}
#ruof-app .ruof-fav:hover,#ruof-app .ruof-fav:focus-visible{background:var(--ru-surface-2,#F4F4F5);color:var(--ru-accent,#1d5c8f)}
#ruof-app .ruof-fav svg{width:20px;height:20px}
#ruof-app .ruof-fav[aria-pressed="true"]{color:var(--ru-accent,#1d5c8f)}
#ruof-app .ruof-fav[aria-pressed="true"] svg{fill:currentColor}
#ruof-app .ru-cartes-vide strong{color:var(--ru-texte,#0e2438)}

/* ---- Pagination : cibles de 44 px ---- */
#ruof-app .ao-pag{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:none;margin:0;padding:0 0 24px;background:transparent}
#ruof-app .ao-pag:empty{display:none}
#ruof-app .ao-pag .ao-pgbtn{min-width:44px;min-height:44px}

/* ---- Fenêtres du logiciel : largeurs (remplacent les style="max-width") ---- */
.ao-ov .ao-modal.ao-modal--720{max-width:720px}
.ao-ov .ao-modal.ao-modal--560{max-width:560px}
.ao-ov .ao-modal.ao-modal--520{max-width:520px}
/* Variables de couleur de la fenêtre « Ma fiche pro » (comme les autres fenêtres). */
#ruof-ov-fiche{--ao-gold:var(--ru-accent,#1d5c8f);--ao-gold-l:var(--ru-accent,#1d5c8f);--ao-gold-d:var(--ru-texte,#0e2438);--ao-gold-soft:var(--ru-accent-doux,rgba(44,111,181,.12));--ao-gold-b:var(--ru-accent-filet,rgba(44,111,181,.45));--ao-black:var(--ru-texte,#0e2438);--ao-black-l:var(--ru-texte-2,#14314b)}
/* Bandeau « qui a vu ta fiche » (Ma fiche pro) : discret, filets fins. */
#ruof-ov-fiche .rufv-strip{margin:0 0 14px;padding:9px 13px;border:1px solid var(--ru-bord,rgba(0,0,0,.10));border-radius:10px;background:var(--ru-surface,#F6F6F4);font-size:12.5px;line-height:1.5;color:var(--ru-texte-2,#374151)}
#ruof-ov-fiche .rufv-strip b{font-variant-numeric:tabular-nums}
#ruof-ov-fiche .rufv-mets{display:block;margin-top:2px;font-size:11.5px;color:var(--ru-discret,#6b7280)}

/* ---- Message « module non chargé » ---- */
.ruof-erreur-module{max-width:720px;margin:40px auto;padding:20px;border:1px solid var(--ru-erreur,#B01C1C);border-radius:8px;background:var(--ru-erreur-doux,#FEE8E8);color:var(--ru-erreur,#B01C1C);font-size:14px}

/* ---- Fenêtre « Signaler cette offre » ---- */
.ruof-sig{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,36,56,.45)}
.ruof-sig[hidden]{display:none}
.ruof-sig-boite{display:flex;flex-direction:column;width:100%;max-width:520px;max-height:90vh;overflow:hidden;border-radius:14px;background:var(--ru-fond,#FFFFFF);box-shadow:0 24px 60px rgba(0,0,0,.25);font-family:var(--ru-police,inherit);color:var(--ru-texte,#0e2438)}
.ruof-sig-tete{padding:20px 24px;border-bottom:1px solid var(--ru-bord,rgba(0,0,0,.10));background:var(--ru-accent-doux,rgba(44,111,181,.12))}
.ruof-sig .ruof-sig-titre{margin:0;font-family:inherit;font-size:17px;font-weight:700;color:var(--ru-texte,#0e2438)}
.ruof-sig-aide{margin:4px 0 0;font-size:13px;color:var(--ru-discret,#6b7280)}
.ruof-sig-corps{flex:1;overflow-y:auto;padding:20px 24px}
.ruof-sig-champ{margin-bottom:14px}
.ruof-sig-champ label{display:block;margin-bottom:6px;font-size:13px;font-weight:600}
.ruof-sig-champ select,.ruof-sig-champ textarea{box-sizing:border-box;width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--ru-bord-2,rgba(0,0,0,.16));border-radius:8px;background:var(--ru-fond,#FFFFFF);color:var(--ru-texte,#0e2438);font-family:inherit;font-size:16px;line-height:1.5}
.ruof-sig-champ textarea{resize:vertical}
.ruof-sig-note{padding:10px 12px;border-left:3px solid var(--ru-accent,#1d5c8f);border-radius:6px;background:var(--ru-surface,#F6F6F4);font-size:13px;line-height:1.5;color:var(--ru-texte-2,#374151)}
.ruof-sig-pied{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px;border-top:1px solid var(--ru-bord,rgba(0,0,0,.10));background:var(--ru-surface,#F6F6F4)}
.ruof-sig-pied .ru-btn{min-height:44px}
@media (max-width:360px){
	.ruof-sig{padding:0}
	.ruof-sig-boite{max-height:100vh;border-radius:0}
	.ruof-sig-pied .ru-btn{flex:1}
}