/* ============================================================ LOCALMAGNET — global.css Un seul fichier pour tout le site. À placer dans : /00_MNJ_Sites/Localmagnet/css/global.css À charger via : GeneratePress > Hooks > wp_head ou via le plugin "Insert Headers and Footers" ============================================================ */ /* ── GOOGLE FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&family=Unbounded:wght@300;700&display=swap'); /* ══════════════════════════════════════════════════════════ TOKENS COMMUNS ══════════════════════════════════════════════════════════ */ :root { /* Typographie */ --font-title: 'Montserrat', sans-serif; --font-body: 'DM Sans', sans-serif; --font-logo: 'Unbounded', sans-serif; /* Fond & surfaces */ --bg: #F5F0E8; --card: #FFFFFF; /* Texte */ --text: #2F2963; --muted: #8A8AA0; /* Bordures */ --border: #E2DDD6; /* Accent global */ --accent: #EF946C; --accent-dark: #C97044; --accent-light: #FDF0E8; /* Couleurs des 4 verticales */ --emploi: #2F2963; --mariage: #AA7BC3; --maison: #EF946C; --exterieur: #70877F; /* Couleurs par défaut (pages sans verticale, ex: home) : reprennent le violet foncé identitaire de la marque. Chaque .vertical-* override ces valeurs. */ --primary: #2F2963; --primary-dark: #1B1840; --primary-light: #EAEAF0; --secondary: #e8304a; --secondary-light: #FAE8EA; /* Rayons */ --radius: 14px; --radius-sm: 10px; --radius-lg: 18px; /* Ombres */ --shadow: 0 2px 16px rgba(47, 41, 99, 0.08); --shadow-hover: 0 8px 28px rgba(47, 41, 99, 0.15); /* Espacement hero — ajuster ici pour tout le site */ --hero-padding-top: 32px; } /* ══════════════════════════════════════════════════════════ TOKENS PAR VERTICALE Usage : ══════════════════════════════════════════════════════════ */ .vertical-emploi { --primary: #e8304a; --primary-og: #2F2963; --primary-dark: #A41623 ; --primary-light: #FAE8EA; --secondary: #2F2963; --secondary-light: #EAEAF0; } .vertical-emploi-entreprise { --primary: #1A6B72; --primary-dark: #0F4F55; --primary-light: #E1F0F1; --secondary: #2F2963; --secondary-light: #EAEAF0; } .vertical-mariage { --primary: var(--mariage); --primary-dark: #835FA0; --primary-light: #F3EBF9; --secondary: #C9A96E; --secondary-light: #FAF3E7; } .vertical-maison { --primary: var(--maison); --primary-dark: #C97044; --primary-light: #ffe0d3; --secondary: #4A6670; --secondary-light: #E8EDEF; } .vertical-jardin { --primary: var(--exterieur); --primary-dark: #4E6560; --primary-light: #EBF0EE; --secondary: #8B6E52; --secondary-light: #F2EBE3; } /* Verticales à venir */ .vertical-senior, .vertical-immobilier { --primary: #984447; --primary-dark: #732F32; --primary-light: #F7EAEA; } .vertical-voiture { --primary: #2F2963; --primary-dark: #1E1A42; --primary-light: #ECEAF5; } .vertical-energie { --primary: var(--exterieur); --primary-dark: #4E6560; --primary-light: #EBF0EE; } /* ══════════════════════════════════════════════════════════ RESET ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; } a { text-decoration: none; color: inherit; } /* ══════════════════════════════════════════════════════════ CONTENEUR ══════════════════════════════════════════════════════════ */ .wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; } @media (max-width: 600px) { .wrap { padding: 0 12px; } } /* ══════════════════════════════════════════════════════════ HOME — HERO ══════════════════════════════════════════════════════════ */ .hero { padding: var(--hero-padding-top) 0 24px; } .hero-eyebrow { display: inline-block; font-family: var(--font-title); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--card); background: var(--text); border-radius: 6px; padding: 4px 10px; margin-bottom: 14px; } .hero-h1 { font-family: var(--font-title); font-weight: 800; font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -1px; color: var(--text); margin-bottom: 10px; } .hero-h1 em { font-style: normal; color: var(--accent); } .hero-sub { font-family: var(--font-body); font-size: 16px; color: var(--muted); line-height: 1.5; } /* ══════════════════════════════════════════════════════════ HOME — CARTES VERTICALES ══════════════════════════════════════════════════════════ */ .section-label { font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .cards { padding: 24px 0 32px; } .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .card { display: flex; align-items: center; gap: 14px; border-radius: var(--radius); padding: 20px 18px; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .card:active { transform: scale(0.98); } .card:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; } .card--emploi { background: var(--emploi); } .card--mariage { background: var(--mariage); } .card--maison { background: var(--maison); } .card--exterieur { background: var(--exterieur); } .card-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-body { flex: 1; min-width: 0; } .card-name { font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--card); line-height: 1.2; margin-bottom: 3px; } .card-desc { font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.82); line-height: 1.4; } .card-arrow { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: var(--card); transition: transform 0.18s ease; } .card:hover .card-arrow { transform: translateX(3px); } /* ── RESPONSIVE HOME ── */ @media (max-width: 600px) { .hero { padding: 24px 0 20px; } .hero-h1 { font-size: clamp(30px, 9vw, 40px); } .cards-grid { grid-template-columns: 1fr; gap: 9px; } .card { padding: 16px; border-radius: 14px; } .card-icon { width: 40px; height: 40px; } .card-name { font-size: 14px; } .card-arrow { width: 28px; height: 28px; font-size: 13px; } } /* ══════════════════════════════════════════════════════════ HOME — VIDÉO DE PRÉSENTATION ══════════════════════════════════════════════════════════ */ .home-video { padding: 8px 0 32px; } .home-video-inner { max-width: 720px; margin: 0 auto; padding: 0 20px; text-align: center; } .home-video-h2 { font-family: var(--font-title); font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; line-height: 1.18; color: var(--text); margin: 0 0 8px; } .home-video-sub { font-family: var(--font-body); font-size: 16px; font-style: italic; color: var(--muted); margin: 0 0 22px; } .home-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--text); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0 0 22px; } .home-video-frame > video, .home-video-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .home-video-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--secondary); display: flex; align-items: center; justify-content: center; padding-left: 4px; } .home-video-cta { display: inline-block; } @media (max-width: 768px) { .home-video { padding: 4px 0 24px; } .home-video-inner { padding: 0 16px; } .home-video-frame { border-radius: 12px; } .home-video-play { width: 54px; height: 54px; } } /* ══════════════════════════════════════════════════════════ HOME — RÉASSURANCE ══════════════════════════════════════════════════════════ */ .reassurance { display: flex; justify-content: flex-start; gap: 8px; padding: 16px 0 40px; flex-wrap: wrap; } .reassurance-pill { display: flex; align-items: center; gap: 6px; border-radius: 20px; padding: 7px 14px; } .rp1 { background: var(--accent); } .rp2 { background: var(--text); } .rp3 { background: var(--exterieur); } .reassurance-pill-val { font-family: var(--font-title); font-weight: 800; font-size: 13px; color: var(--card); } .reassurance-pill-label { font-family: var(--font-title); font-size: 9px; font-weight: 600; color: var(--card); opacity: 0.85; } /* ── PICTOS CARTES — toujours blancs ── */ .card-icon svg { color: var(--card); } /* ── OVERRIDE MOBILE ── */ @media (max-width: 600px) { :root { --hero-padding-top: 30px; } .wrap { padding: 0 10px; } .hero { padding: var(--hero-padding-top) 0 16px; } .hero-h1 { font-size: clamp(30px, 9vw, 40px); } .cards { padding: 16px 0 24px; } .cards-grid { grid-template-columns: 1fr; gap: 8px; } .card { padding: 14px 12px; border-radius: 14px; } .card-icon { width: 40px; height: 40px; } .card-name { font-size: 14px; } .card-arrow { width: 28px; height: 28px; font-size: 13px; } .reassurance { padding: 12px 0 28px; gap: 6px; } } /* ── ANNULATION MARGES ELEMENTOR/GENERATEPRESS MOBILE ── */ @media (max-width: 600px) { .wrap { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 10px; } } /* ── SUPPRESSION PADDING HAUT ELEMENTOR MOBILE ── */ @media (max-width: 600px) { .elementor-section, .elementor-container, .elementor-widget-container, .elementor-column, .elementor-column-wrap { padding-top: 0 !important; margin-top: 0 !important; } } /* ── REMONTÉE BLOC PRINCIPAL MOBILE ── */ @media (max-width: 600px) { .site-content, .content-area, .site-main, main.site-main, #primary, #content, .entry-content, .post-content, .generate-columns-container, .inside-article, .inside-page-header { padding-top: 0 !important; margin-top: 0 !important; } } /* ── SUPPRESSION ESPACES ELEMENTOR PRÉCIS ── */ @media (max-width: 600px) { .e-con-inner, .e-con-boxed, .e-con, .elementor-widget-html { padding-top: 0 !important; margin-top: 0 !important; } /* Supprime le widgets-spacing Elementor */ .elementor * { --widgets-spacing: 0px !important; } } /* ── SUPPRESSION PADDING GENERATEPRESS MOBILE ── */ /* Note : .page-header retiré de cette liste — son padding est géré directement par les règles .page-header de chaque page (sinon le titre se colle au sous-menu Emploi). */ @media (max-width: 768px) { .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header { padding: 0 !important; } } /* ── SUPPRESSION PADDING GENERATEPRESS DESKTOP ── */ .separate-containers .comments-area, .separate-containers .inside-article, .separate-containers .paging-navigation { padding: 0 !important; } /* ══════════════════════════════════════════════════════════ EMPLOI HOME — HERO ══════════════════════════════════════════════════════════ */ .emploi-hero { padding: var(--hero-padding-top) 0 32px; } .emploi-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-title); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); background: var(--primary-light); border: 1.5px solid var(--primary); border-radius: 20px; padding: 5px 12px; margin-bottom: 20px; } .emploi-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } .emploi-h1 { font-family: var(--font-title); font-weight: 800; font-size: clamp(28px, 6vw, 44px); line-height: 1.12; color: var(--text); letter-spacing: -0.6px; margin-bottom: 18px; } .emploi-h1 .kw-primary { color: var(--primary); } .emploi-h1 .kw-secondary { color: var(--secondary); } .emploi-lead { font-family: var(--font-body); font-size: 16px; color: var(--muted); line-height: 1.65; max-width: 480px; margin-bottom: 32px; } .emploi-ctas { display: flex; gap: 10px; flex-wrap: wrap; } /* ── BOUTONS ── */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--card); font-family: var(--font-title); font-size: 14px; font-weight: 700; padding: 13px 22px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none; transition: background 0.18s; letter-spacing: 0.01em; } .btn-primary:hover { background: var(--primary-dark); color: var(--card); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--secondary); font-family: var(--font-title); font-size: 14px; font-weight: 700; padding: 13px 22px; border-radius: 100px; border: 1.5px solid var(--secondary); cursor: pointer; text-decoration: none; transition: background 0.18s, color 0.18s; letter-spacing: 0.01em; } .btn-secondary:hover { background: var(--secondary); color: var(--card); } /* ══════════════════════════════════════════════════════════ EMPLOI HOME — RASSURANCE ══════════════════════════════════════════════════════════ */ .rassurance { background: transparent; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; } .rassurance-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; } .rassurance-item { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); } .rassurance-item:last-child { border-bottom: none; } .rassurance-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rassurance-icon--primary, .rassurance-icon--secondary, .rassurance-icon--accent { background: transparent; } .rassurance-icon svg { color: var(--text); } .rassurance-icon--secondary svg, .rassurance-icon--accent svg { color: var(--text); } .rassurance-title { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.3; } .rassurance-sub { font-family: var(--font-body); font-size: 12px; color: var(--muted); line-height: 1.5; } /* ══════════════════════════════════════════════════════════ EMPLOI HOME — COMMENT ÇA MARCHE ══════════════════════════════════════════════════════════ */ .ccm { background: var(--bg); padding: 52px 0; } .ccm-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; } .ccm-label { font-family: var(--font-title); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .ccm-h2 { font-family: var(--font-title); font-size: clamp(20px, 3.5vw, 26px); font-weight: 800; color: var(--text); margin-bottom: 6px; letter-spacing: -0.3px; } .ccm-sub { font-family: var(--font-body); font-size: 14px; color: var(--muted); font-style: italic; margin-bottom: 36px; } .ccm-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 32px; } .ccm-card { background: var(--card); border: 1.5px solid var(--border); border-top: 3px solid var(--secondary); border-radius: var(--radius); padding: 22px 18px; } .ccm-num { font-family: var(--font-title); font-size: 32px; font-weight: 800; color: var(--primary); opacity: 0.18; line-height: 1; margin-bottom: 12px; } .ccm-card-title { font-family: var(--font-title); font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; line-height: 1.3; } .ccm-card-text { font-family: var(--font-body); font-size: 12px; color: var(--muted); line-height: 1.6; } .ccm-ctas { display: flex; gap: 10px; flex-wrap: wrap; } .btn-white { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--card); font-family: var(--font-title); font-size: 14px; font-weight: 700; padding: 13px 22px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none; transition: background 0.18s; letter-spacing: 0.01em; } .btn-white:hover { background: var(--primary-dark); color: var(--card); } .btn-outline-white { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--primary); font-family: var(--font-title); font-size: 14px; font-weight: 700; padding: 13px 22px; border-radius: 100px; border: 1.5px solid var(--primary); cursor: pointer; text-decoration: none; transition: border-color 0.18s, color 0.18s; letter-spacing: 0.01em; } .btn-outline-white:hover { background: var(--primary); color: var(--card) !important; } /* ══════════════════════════════════════════════════════════ EMPLOI HOME — BLOC RECRUTEUR ══════════════════════════════════════════════════════════ */ .recruteur { padding: 48px 0; } .recruteur-inner { max-width: 860px; margin: 0 auto; padding: 28px 28px 28px 24px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius); border-left: 5px solid var(--primary); } .recruteur-tag { display: inline-block; font-family: var(--font-title); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); background: var(--secondary-light); padding: 4px 10px; border-radius: 6px; margin-bottom: 14px; } .recruteur-h3 { font-family: var(--font-title); font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.25; margin-bottom: 10px; letter-spacing: -0.3px; } .recruteur-text { font-family: var(--font-body); font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; } .recruteur-points { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .recruteur-point { display: flex; align-items: center; gap: 10px; font-family: var(--font-title); font-size: 13px; font-weight: 600; color: var(--text); } .recruteur-point-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); flex-shrink: 0; } /* ── RESPONSIVE EMPLOI ── */ @media (max-width: 600px) { .emploi-hero { padding: 24px 0 28px; } .emploi-ctas, .ccm-ctas { flex-direction: column; align-items: flex-start; } .ccm { padding: 40px 0; } .ccm-grid { grid-template-columns: 1fr; } .recruteur { padding: 32px 0; } .recruteur-inner { padding: 22px 20px 22px 18px; } .rassurance-inner, .ccm-inner, .recruteur { padding-left: 10px; padding-right: 10px; } } /* ══════════════════════════════════════════════════════════ VERTICALE HOME — HERO SIMPLE ══════════════════════════════════════════════════════════ */ .verticale-hero { padding: var(--hero-padding-top) 0 28px; } .verticale-h1 { font-family: var(--font-title); font-weight: 800; font-size: clamp(26px, 5vw, 40px); line-height: 1.12; color: var(--text); letter-spacing: -0.5px; margin-bottom: 12px; } .verticale-h1 .kw { color: var(--primary); } .verticale-gratuit { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-title); font-size: 14px; font-weight: 600; color: var(--muted); } .verticale-gratuit-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ VERTICALE HOME — BENEFITS (rassurance liste) ══════════════════════════════════════════════════════════ */ .benefits { background: transparent; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; } .benefits-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; } .benefit-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .benefit-item:last-child { border-bottom: none; } .benefit-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--primary-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .benefit-icon svg { color: var(--text); } .benefit-title { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.3; } .benefit-sub { font-family: var(--font-body); font-size: 14px; color: var(--muted); line-height: 1.4; } /* ══════════════════════════════════════════════════════════ VERTICALE HOME — LABEL SECTION ══════════════════════════════════════════════════════════ */ .section-label-row { display: flex; align-items: center; gap: 12px; padding: 28px 20px 14px; max-width: 860px; margin: 0 auto; } .section-label-text { font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .section-label-line { flex: 1; height: 1px; background: var(--border); } /* ══════════════════════════════════════════════════════════ VERTICALE HOME — GRILLE EXPERTISES ══════════════════════════════════════════════════════════ */ .expertises { padding: 0 20px 24px; } .expertises-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 860px; margin: 0 auto; } .expertise-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 15px 16px; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; overflow: hidden; } .expertise-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); border-radius: 2px 0 0 2px; } .expertise-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .expertise-card:hover .expertise-arrow { transform: translateX(3px); } .expertise-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .expertise-icon svg { color: var(--card); } .expertise-body { flex: 1; min-width: 0; } .expertise-name { font-family: var(--font-title); font-weight: 700; font-size: 16px; color: var(--text); line-height: 1.3; margin-bottom: 3px; } .expertise-name .kw { color: var(--primary); } .expertise-desc { font-family: var(--font-body); font-size: 14px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .expertise-arrow { font-size: 14px; color: var(--primary); flex-shrink: 0; transition: transform 0.18s ease; } /* ── RESPONSIVE VERTICALE ── */ @media (max-width: 600px) { .verticale-hero { padding: 24px 0 20px; } .benefits-inner { padding: 0 10px; } .section-label-row { padding: 20px 10px 12px; } .expertises { padding: 0 10px 20px; } .expertises-grid { grid-template-columns: 1fr; gap: 8px; } } /* ══════════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════════ */ /* ── NAV COMMUNE ── */ .nav { background: var(--bg); border-bottom: 1px solid var(--border); position: relative; z-index: 100; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 860px; margin: 0 auto; padding: 0 20px; } /* ── LOGO ── */ .nav-logo { font-family: var(--font-logo); font-size: 17px; letter-spacing: -0.5px; color: var(--text); text-decoration: none; flex-shrink: 0; } .nav-logo .local { font-weight: 300; } .nav-logo .magnet { font-weight: 700; } /* ── MENU DESKTOP ── */ .nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; height: 100%; } .nav-menu a { font-family: var(--font-title); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 20px; transition: color 0.18s, background 0.18s; } .nav-menu a:hover { color: var(--text); } /* Item actif selon verticale */ .vertical-emploi .nav-menu .menu-emploi a, .vertical-mariage .nav-menu .menu-mariage a, .vertical-maison .nav-menu .menu-maison a, .vertical-jardin .nav-menu .menu-jardin a { color: var(--card); background: var(--primary); font-weight: 700; } /* ── PILL ZONE ── */ .nav-right { display: flex; align-items: center; gap: 12px; } .zone-pill { font-family: var(--font-title); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--card); background: var(--text); border-radius: 20px; padding: 6px 13px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .zone-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } /* ── BARRE 3 EMPLOI ── */ .nav-sub { display: none; height: 44px; } .nav-sub-inner { display: flex; align-items: stretch; flex: 1; height: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; } .vertical-emploi .nav-sub { display: flex; } /* Fond selon l'espace */ .vertical-emploi-candidat .nav-sub { background: var(--secondary); } .vertical-emploi-entreprise .nav-sub { background: #1A6B72; } /* Tag d'espace (gauche) */ .nav-sub-tag { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.9); padding-right: 14px; border-right: 1px solid rgba(255,255,255,0.15); margin-right: 12px; white-space: nowrap; } .nav-sub-tag svg, .nav-sub-tag i { font-size: 13px; opacity: 0.9; } /* Actions (centre) */ .nav-sub-actions { display: flex; align-items: center; gap: 6px; flex: 1; } /* Pills d'action */ .nav-sub-actions .nav-sub-item { font-family: var(--font-title); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 5px 14px; border-radius: 20px; color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.25); white-space: nowrap; text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s; } .nav-sub-actions .nav-sub-item:hover { color: #fff; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); } /* Pill active — candidat */ .vertical-emploi-candidat .nav-sub-actions .nav-sub-item.active { background: #fff; color: #2F2963; border-color: #fff; font-weight: 700; } /* Pill active — recruteur */ .vertical-emploi-entreprise .nav-sub-actions .nav-sub-item.active { background: #fff; color: #1A6B72; border-color: #fff; font-weight: 700; } /* CTA "Créer mon profil" dans la sous-barre candidat */ .vertical-emploi-candidat .nav-sub-actions .nav-sub-item.nav-sub-cta { background: #e8304a; color: #fff; border-color: #e8304a; } .vertical-emploi-candidat .nav-sub-actions .nav-sub-item.nav-sub-cta:hover { background: #A41623; border-color: #A41623; } /* Switch (droite) */ .nav-sub-switch { display: flex; align-items: center; font-family: var(--font-title); font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.6); text-decoration: underline; white-space: nowrap; cursor: pointer; letter-spacing: 0.02em; text-underline-offset: 2px; } .nav-sub-switch:hover { color: rgba(255,255,255,0.9); } /* ── RESPONSIVE MOBILE ── */ @media (max-width: 768px) { /* Barre 1 */ .nav { height: 48px; padding: 0; border-bottom: none; } .nav-inner { max-width: 100%; margin: 0; padding: 0 16px; height: 48px; } /* Cache menu desktop */ .nav-menu { display: none; } /* Barre 2 */ .nav-mobile-menu { display: flex; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; padding: 5px 16px 6px; margin: 0; width: 100%; box-sizing: border-box; background: var(--bg); border-bottom: 1px solid var(--border); list-style: none; } .nav-mobile-menu::-webkit-scrollbar { display: none; } .nav-mobile-menu a { font-family: var(--font-title); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 6px 14px; border-radius: 20px; white-space: nowrap; transition: color 0.18s, background 0.18s; display: block; } .nav-mobile-menu a:hover { color: var(--text); } /* Item actif mobile */ .vertical-emploi .nav-mobile-menu .menu-emploi a, .vertical-mariage .nav-mobile-menu .menu-mariage a, .vertical-maison .nav-mobile-menu .menu-maison a, .vertical-jardin .nav-mobile-menu .menu-jardin a { color: var(--card); background: var(--primary); font-weight: 700; } /* Barre 3 mobile : scroll horizontal, tag masqué */ .nav-sub { height: 52px; } .nav-sub-inner { max-width: 100%; padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-sub-inner::-webkit-scrollbar { display: none; } .nav-sub-tag { display: none; } .nav-sub-switch { font-size: 9px; flex-shrink: 0; } .nav-sub-actions .nav-sub-item { font-size: 12px; padding: 6px 14px; } }@media (max-width: 768px) { /* Barre 1 */ .nav { height: 48px; padding: 0; border-bottom: none; } .nav-inner { max-width: 100%; margin: 0; padding: 0 16px; height: 48px; } /* Cache menu desktop */ .nav-menu { display: none; } /* Barre 2 */ .nav-mobile-menu { display: flex; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding: 6px 16px 8px; margin: 0; width: 100%; box-sizing: border-box; background: var(--bg); border-bottom: 1px solid var(--border); list-style: none; } .nav-mobile-menu::-webkit-scrollbar { display: none; } /* Points séparateurs entre les li */ .nav-mobile-menu li { display: flex; align-items: center; white-space: nowrap; } .nav-mobile-menu li + li::before { content: '·'; color: var(--muted); font-size: 16px; padding: 0 4px; flex-shrink: 0; } .nav-mobile-menu a { font-family: var(--font-title); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 6px; border-radius: 20px; white-space: nowrap; transition: color 0.18s; display: block; } /* Item actif : juste la couleur, plus de background */ .vertical-emploi .nav-mobile-menu .menu-emploi a, .vertical-mariage .nav-mobile-menu .menu-mariage a, .vertical-maison .nav-mobile-menu .menu-maison a, .vertical-jardin .nav-mobile-menu .menu-jardin a { color: var(--primary); background: none; font-weight: 700; } /* Barre 3 mobile : scroll horizontal, tag masqué */ .nav-sub { height: 52px; } .nav-sub-inner { max-width: 100%; padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-sub-inner::-webkit-scrollbar { display: none; } .nav-sub-tag { display: none; } .nav-sub-switch { font-size: 9px; flex-shrink: 0; } .nav-sub-actions .nav-sub-item { font-size: 12px; padding: 6px 14px; } } @media (min-width: 769px) { /* Cache le menu mobile sur desktop */ .nav-mobile-menu { display: none; } } /* ══════════════════════════════════════════════════════════ STEPPER MODALE OVERLAY ══════════════════════════════════════════════════════════ */ .stepper-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(47, 41, 99, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 20px; } .stepper-overlay.open { display: flex; } .stepper-iframe { width: 100%; max-width: 580px; height: 90vh; height: 90dvh; max-height: 780px; border: none; border-radius: 20px; box-shadow: 0 24px 64px rgba(47, 41, 99, 0.25); background: var(--card); } @media (max-width: 600px) { .stepper-overlay { padding: 0; align-items: flex-end; } .stepper-iframe { max-width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; } } /* ══════════════════════════════════════════════════════════ EMPLOI ENTREPRISE ══════════════════════════════════════════════════════════ */ /* ── PROFILS RECRUTEURS ── */ .profils { padding: 48px 0; background: var(--bg); } .profils-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; } .profils-h2 { font-family: var(--font-title); font-size: clamp(20px, 3.5vw, 26px); font-weight: 800; color: var(--text); letter-spacing: -0.3px; margin-bottom: 8px; } .profils-intro { font-family: var(--font-body); font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 28px; max-width: 520px; } .profils-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .profil-card { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px; } .profil-card.red { border-left: 4px solid var(--primary); } .profil-card.navy { border-left: 4px solid var(--secondary); } .profil-card-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .profil-card-icon svg { color: var(--primary); } .profil-card.navy .profil-card-icon { background: var(--secondary-light) !important; } .profil-card.navy .profil-card-icon svg { color: var(--secondary); } .profil-card-title { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.3; } .profil-card-text { font-family: var(--font-body); font-size: 12px; color: var(--muted); line-height: 1.55; } /* ── CCM ENTREPRISE (steps verticaux) ── */ .ccm-steps { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; } .ccm-step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .ccm-step:last-child { border-bottom: none; } .ccm-step-num { font-family: var(--font-title); font-size: 22px; font-weight: 800; color: rgba(255,255,255,.15); line-height: 1; flex-shrink: 0; width: 32px; padding-top: 2px; } .ccm-step-title { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--card); margin-bottom: 5px; line-height: 1.3; } .ccm-step-text { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.65; } .ccm-step-text .highlight { color: rgba(255,255,255,.8); font-style: normal; } /* ── BOUTONS NAVY ── */ .btn-navy { display: inline-flex; align-items: center; gap: 8px; background: var(--secondary); color: var(--card); font-family: var(--font-title); font-size: 14px; font-weight: 700; padding: 13px 22px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none; transition: background 0.18s; letter-spacing: 0.01em; } .btn-navy:hover { background: var(--primary-dark); color: var(--card); } .btn-outline-navy { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--secondary); font-family: var(--font-title); font-size: 14px; font-weight: 700; padding: 13px 22px; border-radius: 100px; border: 1.5px solid var(--secondary); cursor: pointer; text-decoration: none; transition: background 0.18s, color 0.18s; letter-spacing: 0.01em; } .btn-outline-navy:hover { background: var(--secondary); color: var(--card); } /* ── CTA FINAL ── */ .cta-final { padding: 48px 0; } .cta-final-inner { max-width: 860px; margin: 0 auto; padding: 32px 28px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); text-align: center; } .cta-final-h3 { font-family: var(--font-title); font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; margin-bottom: 10px; } .cta-final-sub { font-family: var(--font-body); font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; } .cta-final-note { font-family: var(--font-body); font-size: 12px; color: var(--muted); font-style: italic; margin-top: 14px; } /* ── RESPONSIVE EMPLOI ENTREPRISE ── */ @media (max-width: 600px) { .profils-grid { grid-template-columns: 1fr; } .profils-inner, .cta-final-inner { padding: 0 10px; } .cta-final-inner { padding: 24px 16px; } .hero-ctas { flex-direction: column; } .ccm-ctas { flex-direction: column; } .btn-navy, .btn-outline-navy { justify-content: center; } } /* ── CCM entreprise — steps cards ── */ .ccm--steps { background: var(--bg); padding: 52px 0; } .ccm--steps .ccm-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; } .ccm--steps .ccm-label { color: var(--muted); } .ccm--steps .ccm-h2 { color: var(--text); } .ccm--steps .ccm-sub { color: var(--muted); font-style: italic; } .ccm--steps .ccm-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } .ccm--steps .ccm-step { display: flex; gap: 16px; align-items: flex-start; background: var(--secondary); border-radius: var(--radius); padding: 18px 20px; } .ccm--steps .ccm-step-num { font-family: var(--font-title); font-size: 20px; font-weight: 800; color: rgba(255,255,255,.2); line-height: 1; flex-shrink: 0; width: 28px; padding-top: 2px; } .ccm--steps .ccm-step-body { flex: 1; } .ccm--steps .ccm-step-title { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 5px; line-height: 1.3; } .ccm--steps .ccm-step-text { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.65; } .ccm--steps .ccm-step-text .highlight { color: #fff; font-style: normal; font-weight: 600; } .ccm--steps .ccm-ctas { display: flex; gap: 10px; flex-wrap: wrap; } /* Bonus block dans ccm--steps : fond blanc + encadré rouge, distinct des étapes */ .ccm-bonus { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--primary); border-radius: var(--radius); padding: 18px 20px; gap: 6px; } /* Textes du bonus : couleurs sombres lisibles sur fond blanc */ .ccm--steps .ccm-bonus .ccm-step-title { color: var(--text); } .ccm--steps .ccm-bonus .ccm-step-text { color: var(--muted); } .ccm--steps .ccm-bonus .ccm-step-text .highlight { color: var(--primary); font-weight: 700; } .ccm-bonus-badge { display: flex; align-items: center; } .ccm-bonus-badge span { font-family: var(--font-title); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--primary); background: var(--primary-light); border-radius: 6px; padding: 3px 7px; white-space: nowrap; display: inline-block; } /* ══════════════════════════════════════════════════════════ EMPLOI — ENCART RECRUTEUR (page candidat / home emploi) ══════════════════════════════════════════════════════════ */ .vertical-emploi-candidat .recruteur-inner { border-left-color: #1A6B72; }