/* ============================================================= InfoChap.ci — Design System Brand: #011042 (navy) · #DBFDFF (cyan) · #FFFFFF (white) Accents inspired by the Ivorian flag (orange / green) Author: build for Ogou Ayenon — www.ogou.blog ============================================================= */ /* ---------- 1. Design Tokens ---------- */ :root { /* Brand core */ --navy: #011042; --navy-900: #010b2e; --navy-800: #04165a; --navy-700: #0a2179; --navy-600: #123098; --cyan: #DBFDFF; --cyan-200: #b7f6fb; --cyan-300: #8fe9f2; --cyan-500: #37c8db; --cyan-600: #178fa3; /* readable teal ~3.8:1 on white (WCAG AA large) — used for "Les plus lus" ranks 04+ */ --white: #ffffff; /* Accents (Côte d'Ivoire) */ --orange: #ff6b00; --orange-600: #e85d00; --green: #00a651; --green-600: #008f46; --red: #e11d2a; /* breaking / live */ /* Neutrals */ --ink: #0a0f2c; --ink-soft: #33385a; --muted: #6b7192; --line: #e6e9f5; --line-soft: #eef1fa; --bg: #ffffff; --bg-soft: #f5f8ff; --bg-cyan: #eefdff; /* Effects */ --shadow-sm: 0 1px 3px rgba(1,16,66,.08), 0 1px 2px rgba(1,16,66,.04); --shadow: 0 6px 20px rgba(1,16,66,.10); --shadow-lg: 0 18px 50px rgba(1,16,66,.18); --shadow-navy: 0 20px 50px rgba(1,16,66,.35); --ring: 0 0 0 3px rgba(55,200,219,.35); /* Radii */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* Type */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-head: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* Layout */ --maxw: 1240px; --gutter: clamp(16px, 4vw, 40px); --header-h: 116px; --ease: cubic-bezier(.22,.61,.36,1); --ease-bounce: cubic-bezier(.34,1.56,.64,1); } /* ---------- 2. Reset / Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Deliberately NO horizontal-overflow declaration here. `html` above already clips, and once the root's overflow is not `visible` it stops being taken from — so clipping/hiding overflow on would turn it into a scroll container and silently break sticky .site-header. */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: 1rem; } h1,h2,h3,h4,h5 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; color: var(--navy); font-weight: 800; letter-spacing: -.01em; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } ::selection { background: var(--navy); color: var(--cyan); } /* ---------- 3. Layout helpers ---------- */ .container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .container-wide { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); } .section { padding: clamp(48px, 7vw, 90px) 0; } .section-sm { padding: clamp(32px, 4vw, 56px) 0; } .grid { display: grid; gap: 26px; } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .flex { display: flex; } .between { justify-content: space-between; align-items: center; } .center { align-items: center; } .wrap { flex-wrap: wrap; } .gap-sm { gap: 10px; } .gap { gap: 20px; } .mt-0{margin-top:0}.mb-0{margin-bottom:0} .text-center { text-align: center; } .muted { color: var(--muted); } @media (max-width: 960px){ .g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(2,1fr)} } @media (max-width: 640px){ .g-4,.g-3,.g-2{grid-template-columns:1fr} } /* Article/list pages put "Les plus lus" in a fixed-width sidebar via an INLINE grid-template (minmax(0,1fr) 330-340px). On tablets/phones that never collapses, crushing the main column toward 0 and clipping the widget — so force one column (!important beats the inline style) and shrink the inline 44px gap to a mobile-appropriate row gap. */ @media (max-width: 900px){ .g-sidebar{ grid-template-columns:1fr !important; gap:28px !important; } } /* Jobs filter panel: pinned beside the list on desktop, but NOT sticky once the grid collapses to one column (a pinned full-width panel would otherwise cover the offers while scrolling). */ .job-filter{ position:sticky; top:130px; } @media (max-width: 900px){ .job-filter{ position:static; } } /* ---------- 4. Kicker / Section headers ---------- */ .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--navy-700); } .kicker::before { content:""; width: 26px; height: 3px; border-radius: 3px; background: var(--orange); } .section-title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin: 12px 0 6px; } .section-head { margin-bottom: 34px; } .section-head .lead { color: var(--muted); max-width: 620px; font-size: 1.05rem; } /* Rule with label */ .rule-head { display:flex; align-items:center; gap:16px; margin-bottom: 26px; } .rule-head h2 { margin:0; font-size: clamp(1.25rem,2.4vw,1.7rem); position:relative; padding-left:16px; } .rule-head h2::before { content:""; position:absolute; left:0; top:8%; height:84%; width:6px; border-radius:6px; background: var(--orange); } .rule-head .line { flex:1; height:2px; background: var(--line); } .rule-head .more { font-weight:700; color:var(--navy-700); font-size:.92rem; white-space:nowrap; } .rule-head .more:hover{ color:var(--orange); } /* ---------- 5. Buttons ---------- */ .btn { --bg: var(--navy); --fg: #fff; display: inline-flex; align-items: center; justify-content:center; gap: 10px; padding: 13px 26px; border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 800; font-size: .95rem; background: var(--bg); color: var(--fg); position: relative; isolation: isolate; transition: transform .28s var(--ease), box-shadow .3s var(--ease), background .25s, filter .25s; box-shadow: var(--shadow-sm); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0) scale(.99); } .btn-orange { --bg: var(--orange); --fg:#fff; } .btn-orange:hover { --bg: var(--orange-600); } .btn-cyan { --bg: var(--cyan); --fg: var(--navy); } .btn-cyan:hover { --bg: var(--cyan-200); } .btn-green { --bg: var(--green); } .btn-green:hover { --bg: var(--green-600); } .btn-navy:hover { --bg: var(--navy-700); } .btn-ghost { --bg: transparent; --fg: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); } .btn-ghost:hover { --bg: var(--navy); --fg:#fff; } .btn-light { --bg:#fff; --fg:var(--navy); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); } .btn-light:hover { --bg: var(--cyan); } .btn-lg { padding: 16px 34px; font-size: 1.02rem; } .btn-sm { padding: 9px 18px; font-size: .85rem; } .btn-block { width: 100%; } /* ---------- 6. Badges / tags ---------- */ .badge { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-head); font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; padding: 5px 11px; border-radius: var(--r-pill); background: var(--cyan); color: var(--navy); } .badge-orange { background: var(--orange); color:#fff; } .badge-green { background: var(--green); color:#fff; } .badge-navy { background: var(--navy); color: var(--cyan); } .badge-live { background: var(--red); color:#fff; } .badge-live::before { content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation: pulse 1.2s infinite; } .tag { font-size:.8rem; font-weight:700; color:var(--navy-700); background:var(--bg-cyan); padding:5px 12px; border-radius:var(--r-pill); transition:.2s; } .tag:hover { background:var(--navy); color:var(--cyan); } /* ---------- 7. Cards / Articles ---------- */ .card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; display:flex; flex-direction:column; height:100%; } .card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: var(--cyan-300); } .card .thumb { position:relative; aspect-ratio: 16/10; overflow:hidden; background: var(--bg-soft); } .card .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); } .card:hover .thumb img { transform: scale(1.07); } .card .thumb .badge { position:absolute; top:12px; left:12px; z-index:2; box-shadow:var(--shadow-sm); } .card .body { padding: 18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; } .card h3 { font-size: 1.14rem; line-height:1.3; margin:0; } .card h3 a { position:relative; } .card h3 a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--orange); transition: width .35s var(--ease); } .card:hover h3 a::after { width:100%; } .card .excerpt { color: var(--ink-soft); font-size: .95rem; } .card .meta { margin-top:auto; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.82rem; font-weight:600; } .card .meta .cat { color: var(--orange); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; } /* Horizontal list item */ .hitem { display:grid; grid-template-columns: 108px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); align-items:center; } .hitem:last-child{border-bottom:none;} .hitem .thumb{ border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1/1; } .hitem .thumb img{ width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease);} .hitem:hover .thumb img{ transform:scale(1.08); } .hitem h4{ font-size:1rem; margin:0 0 6px; line-height:1.32; } .hitem:hover h4{ color:var(--navy-700); } .hitem .meta{ font-size:.78rem; color:var(--muted); font-weight:600;} .hitem .rank{ font-family:var(--font-display); font-size:1.5rem; font-weight:900; color:var(--cyan-300); width:26px;} /* Feature (large) */ .feature { position:relative; border-radius: var(--r-xl); overflow:hidden; min-height: 460px; display:flex; align-items:flex-end; color:#fff; box-shadow: var(--shadow-lg);} .feature img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform 1s var(--ease); } .feature:hover img.bg { transform: scale(1.05); } .feature::after { content:""; position:absolute; inset:0; background: rgba(1,11,46,.5); z-index:1; } .feature .feature-body { position:relative; z-index:2; padding: clamp(24px,4vw,44px); } /* Optional CTA on a "Toutes nos rubriques" card (set from the CRM). The card itself is the link, so this is a styled as a button — nesting an inside an would be invalid HTML. */ .cat-cta{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:7px 14px; border-radius:99px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34); backdrop-filter:blur(2px); font-family:var(--font-head); font-weight:700; font-size:.8rem; color:#fff; transition:.22s var(--ease); } .cat-cta span{ transition:transform .22s var(--ease); } .feature:hover .cat-cta{ background:var(--orange); border-color:var(--orange); } .feature:hover .cat-cta span{ transform:translateX(3px); } .feature h2 { color:#fff; font-family: var(--font-display); font-size: clamp(1.6rem,3.4vw,2.7rem); line-height:1.12; margin:12px 0 10px; text-wrap:balance; } .feature p { color: rgba(255,255,255,.85); max-width: 620px; } .feature .meta { color: var(--cyan-200); font-weight:700; font-size:.85rem; } /* ---------- 8. Header ---------- */ .site-header { position: sticky; top:0; z-index: 200; } /* Utility top bar */ .topbar { background: var(--navy-900); color: rgba(255,255,255,.7); font-size:.8rem; } .topbar .container { display:flex; justify-content:space-between; align-items:center; height:40px; gap:20px; } .topbar .tb-left { display:flex; align-items:center; } .topbar .tb-item { display:flex; align-items:center; gap:7px; font-weight:600; letter-spacing:.01em; padding:0 15px; position:relative; white-space:nowrap; } .topbar .tb-item:first-child { padding-left:0; } .topbar .tb-item + .tb-item::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:14px; background:rgba(255,255,255,.14); } .topbar .tb-item svg { width:14px; height:14px; stroke: var(--cyan-500); fill:none; stroke-width:2; } .topbar .tb-loc { color: rgba(255,255,255,.55); } .topbar .tb-right { display:flex; align-items:center; gap:16px; } .topbar .tb-nav { display:flex; gap:16px; align-items:center; } .topbar .tb-nav a { font-weight:600; transition:color .2s; } .topbar .tb-nav a:hover { color: var(--cyan); } .topbar .tb-sep { width:1px; height:15px; background:rgba(255,255,255,.14); } .topbar .socials { display:flex; gap:7px; } .topbar .socials a { width:26px;height:26px; display:grid;place-items:center; border-radius:50%; background:rgba(255,255,255,.08); transition:.25s;} .topbar .socials a:hover{ background: var(--orange); transform:translateY(-2px);} .topbar .socials svg{ width:13px;height:13px; fill: currentColor;} @media (max-width: 760px){ .topbar .tb-loc, .topbar .tb-nav, .topbar .tb-sep{ display:none; } } .mainbar { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(12px); border-bottom:1px solid var(--line); transition: box-shadow .3s, padding .3s; } .mainbar .container { display:flex; align-items:center; justify-content:space-between; height:78px; gap: 20px; } .brand { display:flex; align-items:center; gap:12px; flex-shrink:0; } .brand .logo { height: 46px; width:auto; transition: transform .5s var(--ease-bounce); } .brand:hover .logo{ transform: rotate(-4deg) scale(1.05); } .brand .brand-txt { display:flex; flex-direction:column; line-height:1; } .brand .brand-txt b { font-family:var(--font-head); font-weight:900; font-size:1.4rem; color:var(--navy); letter-spacing:-.02em; } .brand .brand-txt b i { color: var(--orange); font-style:normal; } .brand .brand-txt span { font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:3px;} .nav { display:flex; align-items:center; gap: 2px; } .nav .nav-top { position:relative; padding: 10px 13px; font-family:var(--font-head); font-weight:700; font-size:.94rem; color: var(--navy); border-radius: var(--r-sm); transition: color .25s; display:inline-flex; align-items:center; white-space:nowrap; } .nav .nav-top::after { content:""; position:absolute; left:13px; right:13px; bottom:5px; height:2px; background: var(--orange); transform: scaleX(0); transform-origin:left; transition: transform .3s var(--ease); border-radius:2px;} .nav .nav-top:hover { color: var(--navy-700); } .nav .nav-top:hover::after, .nav .nav-top.active::after { transform: scaleX(1); } .nav .nav-top.active { color: var(--navy-700); } .nav .has-drop { position: relative; } .nav .drop { position:absolute; top: calc(100% + 6px); left:0; min-width: 230px; background:#fff; border:1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform: translateY(10px); transition: .3s var(--ease); z-index: 50; } .nav .has-drop:hover .drop { opacity:1; visibility:visible; transform: translateY(0); } .nav .drop a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: var(--r-sm); font-weight:600; font-size:.92rem; color: var(--ink); transition:.2s; } .nav .drop a:hover { background: var(--bg-cyan); color: var(--navy-700); padding-left:16px; } .nav .drop a .dot { width:7px;height:7px;border-radius:50%; background: var(--orange); } .header-actions { display:flex; align-items:center; gap:10px; } .icon-btn { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--navy); transition:.25s; } .icon-btn:hover { background: var(--bg-cyan); transform: translateY(-2px); } .icon-btn svg { width:19px; height:19px; stroke: currentColor; fill:none; stroke-width:2; } .subscribe-cta { white-space:nowrap; } .subscribe-cta svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; } @media (max-width: 520px){ .subscribe-cta span { display:none; } .subscribe-cta { padding:10px 12px; } } .burger { display:none; } /* on scroll: only add a shadow — DON'T change the header height (a sticky-header height change shifts all content and causes a visible "jump/movement" on every scroll, very noticeable on phones) */ .site-header.scrolled .mainbar { box-shadow: var(--shadow); } /* Breaking ticker */ .ticker { background: var(--navy); color:#fff; overflow:hidden; } .ticker .container { display:flex; align-items:center; gap:0; height:44px; } .ticker .tk-label { background: var(--red); font-family:var(--font-head); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; padding: 0 16px; height:44px; display:flex; align-items:center; gap:8px; margin-left: calc(-1 * var(--gutter)); } .ticker .tk-label::before{ content:""; width:8px;height:8px;border-radius:50%;background:#fff; animation:pulse 1.1s infinite;} .ticker .tk-logo{ height:22px; width:auto; max-width:90px; border-radius:5px; object-fit:contain; display:block; } .ticker .tk-track { flex:1; overflow:hidden; white-space:nowrap; } .ticker .tk-move { display:inline-flex; gap:44px; padding-left:24px; animation: ticker 34s linear infinite; } .ticker:hover .tk-move { animation-play-state: paused; } .ticker .tk-move a, .ticker .tk-move span { font-weight:600; font-size:.9rem; } .ticker .tk-move a::before, .ticker .tk-move span::before{ content:"›"; color:var(--orange); margin-right:8px; font-weight:900;} /* ---------- 9. Mobile drawer ---------- */ .drawer { position: fixed; inset:0; z-index: 400; visibility:hidden; } .drawer .scrim { position:absolute; inset:0; background: rgba(1,11,46,.55); opacity:0; transition:.3s; backdrop-filter: blur(2px); } .drawer .panel { position:absolute; top:0; right:0; height:100%; width: min(86vw, 360px); background:#fff; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .4s var(--ease); display:flex; flex-direction:column; padding: 22px; overflow-y:auto; } .drawer.open { visibility:visible; } .drawer.open .scrim { opacity:1; } .drawer.open .panel { transform: translateX(0); } .drawer .panel a { padding: 13px 8px; font-family:var(--font-head); font-weight:700; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; color:var(--navy);} .drawer .panel a:hover{ color:var(--orange); padding-left:12px;} .drawer .d-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;} /* ---------- 10. Hero ---------- */ .hero { position:relative; background: var(--navy-900); color:#fff; overflow:hidden; } .hero::before{ content:""; position:absolute; width:460px;height:460px; right:-150px; top:-170px; border-radius:50%; background: var(--navy-800); animation: float 9s ease-in-out infinite;} .hero::after{ content:""; position:absolute; width:220px;height:220px; left:-90px; bottom:-120px; border-radius:50%; background: var(--navy-700); animation: float 11s ease-in-out infinite reverse;} .hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items:stretch; position:relative; z-index:2; padding: clamp(30px,5vw,58px) 0; } .hero .lead-feature { position:relative; border-radius: var(--r-xl); overflow:hidden; min-height: 480px; display:flex; align-items:flex-end; box-shadow: var(--shadow-navy); } .hero .lead-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); } .hero .lead-feature:hover img { transform: scale(1.06); } .hero .lead-feature::after{ content:""; position:absolute; inset:0; background: rgba(1,11,46,.5); } .hero .lf-body{ position:relative; z-index:2; padding: clamp(22px,3vw,38px);} .hero .lf-body h1{ color:#fff; font-family:var(--font-display); font-size: clamp(1.7rem,3.5vw,2.7rem); line-height:1.1; margin:12px 0; text-wrap:balance;} .hero .lf-body p{ color: rgba(255,255,255,.82); max-width: 560px; } .hero .side-list{ display:flex; flex-direction:column; gap:14px; } .hero .side-list .s-card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: var(--r); padding:14px; display:grid; grid-template-columns: 96px 1fr; gap:14px; align-items:center; transition:.3s; backdrop-filter: blur(6px);} .hero .side-list .s-card:hover{ background: rgba(255,255,255,.12); transform: translateX(6px);} .hero .side-list .s-card .thumb{ border-radius:10px; overflow:hidden; aspect-ratio:4/3;} .hero .side-list .s-card .thumb img{ width:100%;height:100%;object-fit:cover;} .hero .side-list .s-card h4{ color:#fff; font-size:.98rem; margin:0 0 6px; line-height:1.3;} .hero .side-list .s-card .meta{ color: var(--cyan-200); font-size:.76rem; font-weight:700;} @media (max-width: 920px){ .hero-grid{ grid-template-columns:1fr; } } /* ---------- 11. Category pill row ---------- */ .cat-row { display:flex; gap:10px; overflow-x:auto; padding: 4px 0 8px; scrollbar-width:none; } .cat-row::-webkit-scrollbar{ display:none; } .cat-chip { flex-shrink:0; padding:9px 18px; border-radius:var(--r-pill); font-family:var(--font-head); font-weight:700; font-size:.9rem; background:#fff; border:1px solid var(--line); color:var(--navy); transition:.25s; } .cat-chip:hover, .cat-chip.active { background: var(--navy); color:#fff; border-color:var(--navy); transform: translateY(-2px); } /* ---------- 12. Newsletter block ---------- */ .newsletter-cta { position:relative; overflow:hidden; border-radius: var(--r-xl); background: var(--navy); color:#fff; padding: clamp(30px,5vw,56px); } .newsletter-cta::before{ content:""; position:absolute; width:300px;height:300px; right:-70px; top:-90px; border-radius:50%; background: var(--navy-800);} .newsletter-cta::after{ content:""; position:absolute; width:200px;height:200px; left:-60px; bottom:-90px; border-radius:50%; background: var(--navy-700);} .newsletter-cta .nl-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap:30px; align-items:center;} .newsletter-cta h2{ color:#fff; font-family:var(--font-display); font-size: clamp(1.5rem,3vw,2.3rem);} .newsletter-cta p{ color: rgba(255,255,255,.82); } .nl-form{ display:flex; gap:10px; flex-wrap:wrap; } .nl-form input{ flex:1; min-width: 200px; padding: 15px 18px; border-radius: var(--r-pill); border:none; background: rgba(255,255,255,.95); color:var(--ink); } .nl-form input:focus-visible{ box-shadow: var(--ring); } @media (max-width:800px){ .newsletter-cta .nl-inner{ grid-template-columns:1fr; } } /* ---------- 13. Stats ---------- */ .stats { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; } .stat { text-align:center; padding: 26px 16px; border-radius: var(--r-lg); background:#fff; border:1px solid var(--line); transition:.35s; } .stat:hover{ transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--cyan-300); } .stat .num { font-family: var(--font-display); font-weight:900; font-size: clamp(2rem,4vw,2.8rem); color: var(--navy); line-height:1; } .stat .num small{ color: var(--orange); } .stat .lbl { color: var(--muted); font-weight:700; font-size:.86rem; margin-top:8px; text-transform:uppercase; letter-spacing:.05em; } @media (max-width:640px){ .stats{ grid-template-columns: repeat(2,1fr);} } /* ---------- 14. Footer ---------- */ .site-footer { background: var(--navy-900); color: rgba(255,255,255,.72); margin-top: 60px; position:relative; overflow:hidden;} .site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background: var(--orange); } .footer-cta{ background: var(--navy-800); border-radius: var(--r-xl); padding: clamp(28px,4vw,44px); margin: -40px auto 50px; max-width: var(--maxw); position:relative; z-index:3; box-shadow: var(--shadow-navy); display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:center; border:1px solid rgba(255,255,255,.08);} .footer-cta h3{ color:#fff; margin:0 0 6px; font-size: clamp(1.3rem,2.6vw,1.9rem);} .footer-cta p{ margin:0; color: rgba(255,255,255,.8);} @media (max-width:760px){ .footer-cta{ grid-template-columns:1fr; text-align:center;} } .footer-main{ padding: 46px 0 34px; display:grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: 30px 28px; } .footer-brand .logo{ height:48px; margin-bottom:14px; } .footer-brand p{ font-size:.92rem; max-width: 320px; } .footer-col h5{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:16px; position:relative; padding-bottom:10px;} .footer-col h5::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; background: var(--orange);} .footer-col a{ display:block; padding:7px 0; font-size:.92rem; color: rgba(255,255,255,.7); transition:.25s; } .footer-col a:hover{ color: var(--cyan); transform: translateX(5px); } .footer-socials{ display:flex; gap:10px; margin-top:16px; } .footer-socials a{ width:38px;height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:grid; place-items:center; transition:.3s;} .footer-socials a:hover{ background: var(--orange); transform: translateY(-3px);} .footer-socials svg{ width:16px;height:16px; fill:#fff; } .footer-contact{ display:flex; flex-direction:column; gap:8px; margin-top:18px; } .footer-contact a, .footer-contact .fc-addr{ display:flex; align-items:flex-start; gap:9px; color:rgba(255,255,255,.78); font-size:.9rem; line-height:1.4; } .footer-contact a:hover{ color:var(--cyan); } .footer-contact svg{ width:16px;height:16px; flex:none; margin-top:2px; stroke:var(--orange); fill:none; stroke-width:2; } .footer-partners{ border-top:1px solid rgba(255,255,255,.1); padding: 24px 0; display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .footer-partners .pl{ opacity:.7; font-weight:800; font-family:var(--font-head); color:#fff; transition:.3s; padding:6px 12px; border:1px solid rgba(255,255,255,.15); border-radius:var(--r-sm);} .footer-partners .pl:hover{ opacity:1; border-color: var(--cyan-500); } .footer-partners .pl-img{ background:#fff; opacity:.92; padding:5px 10px; display:inline-flex; align-items:center; border-color:transparent; } .footer-partners .pl-img:hover{ opacity:1; border-color:transparent; transform:translateY(-2px); } .footer-partners .pl-img img{ height:22px; width:auto; max-width:110px; object-fit:contain; display:block; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding: 20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:.85rem; } .footer-bottom .credit{ color: rgba(255,255,255,.6); } .footer-bottom .credit a{ color: var(--cyan); font-weight:700; } .footer-bottom .credit a:hover{ color: var(--orange); } .footer-bottom .legal-links{ display:flex; gap:18px; flex-wrap:wrap; } .footer-bottom .legal-links a:hover{ color: var(--cyan); } @media (max-width: 1080px){ .footer-main{ grid-template-columns: 1fr 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } } @media (max-width: 720px){ .footer-main{ grid-template-columns: 1fr 1fr; } } @media (max-width: 460px){ .footer-main{ grid-template-columns: 1fr; } .footer-brand p{ max-width:none; } } /* ---------- 15. Page hero / breadcrumb ---------- */ .page-hero{ background: var(--navy); color:#fff; padding: clamp(40px,6vw,72px) 0 clamp(34px,5vw,56px); position:relative; overflow:hidden;} .page-hero::after{ content:""; position:absolute; right:-110px; bottom:-150px; width:360px;height:360px; border-radius:50%; background: var(--navy-800); z-index:0; pointer-events:none;} .page-hero::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--orange); z-index:1; pointer-events:none;} .page-hero .container{ position:relative; z-index:2; } .page-hero .kicker{ color: var(--cyan-200); } .page-hero .kicker::before{ background: var(--orange); } .page-hero h1{ color:#fff; font-family: var(--font-display); font-size: clamp(2rem,5vw,3.2rem); margin:14px 0 12px; text-wrap:balance; max-width: 800px;} .page-hero p{ color: rgba(255,255,255,.82); max-width: 640px; font-size: 1.08rem; } .breadcrumb{ display:flex; gap:8px; align-items:center; font-size:.85rem; color: rgba(255,255,255,.65); font-weight:600; } .breadcrumb a:hover{ color: var(--cyan); } .breadcrumb .sep{ opacity:.5; } /* ---------- 16. Article body ---------- */ .article-layout{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap: 48px; } @media (max-width: 980px){ .article-layout{ grid-template-columns:1fr; } } .prose{ font-size: 1.08rem; color: var(--ink-soft); line-height: 1.8; } .prose h2{ font-size: 1.6rem; margin: 1.6em 0 .5em; } .prose h3{ font-size: 1.28rem; margin: 1.4em 0 .5em; } .prose p{ margin: 0 0 1.2em; } .prose img{ border-radius: var(--r); margin: 1.4em 0; box-shadow: var(--shadow-sm); } .prose blockquote{ margin: 1.5em 0; padding: 6px 0 6px 24px; border-left: 5px solid var(--orange); font-family: var(--font-display); font-size: 1.3rem; font-style:italic; color: var(--navy); } .prose a{ color: var(--navy-700); font-weight:600; text-decoration: underline; text-decoration-color: var(--cyan-500); text-decoration-thickness: 1px; text-underline-offset: 3px; } .prose a:hover{ color: var(--orange); } .prose ul, .prose ol{ padding-left: 1.3em; margin: 0 0 1.2em; } .prose li{ margin-bottom: .5em; } .prose figure figcaption{ font-size:.85rem; color:var(--muted); text-align:center; margin-top:8px; } .prose hr{ border:none; border-top:2px solid var(--line); margin:2em 0; } .prose .embed{ position:relative; padding-bottom:56.25%; height:0; margin:1.6em 0; border-radius:var(--r); overflow:hidden; background:#000; } .prose .embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* "Les plus lus" — aligned ranked list */ .most-read{ display:block; } .most-read .mr-item{ display:grid; grid-template-columns: 22px 56px minmax(0,1fr); gap:13px; align-items:center; padding:12px 0; border-top:1px solid var(--line-soft); } .most-read .mr-item:first-child{ border-top:none; padding-top:2px; } .most-read .mr-item:last-child{ padding-bottom:2px; } .most-read .mr-rank{ font-family: var(--font-display); font-weight:900; font-size:1.25rem; line-height:1; color: var(--cyan-600); text-align:center; font-variant-numeric: tabular-nums; } .most-read .mr-item:first-child .mr-rank{ color: var(--orange); } .most-read .mr-item:nth-child(2) .mr-rank, .most-read .mr-item:nth-child(3) .mr-rank{ color: var(--navy-600); } .most-read .mr-thumb{ width:56px; height:56px; border-radius:10px; overflow:hidden; background: var(--bg-soft); } .most-read .mr-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); } .most-read .mr-item:hover .mr-thumb img{ transform: scale(1.08); } .most-read .mr-body{ min-width:0; } .most-read .mr-body h4{ font-family: var(--font-head); font-weight:700; font-size:.92rem; line-height:1.32; margin:0 0 5px; color: var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .most-read .mr-item:hover .mr-body h4{ color: var(--orange); } .most-read .mr-meta{ font-size:.75rem; color: var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .most-read .mr-cat{ color: var(--orange); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; } /* Sidebar widgets */ .widget{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-bottom: 24px; } .widget h4{ font-size: 1.05rem; margin-bottom: 16px; display:flex; align-items:center; gap:10px;} .widget h4::before{ content:""; width:6px; height:20px; border-radius:6px; background: var(--orange); } /* ---------- 17. Forms ---------- */ .field{ margin-bottom: 16px; } .field label{ display:block; font-family:var(--font-head); font-weight:700; font-size:.88rem; margin-bottom:7px; color:var(--navy); } .field input, .field textarea, .field select{ width:100%; padding: 13px 15px; border-radius: var(--r); border:1.5px solid var(--line); background:#fff; color: var(--ink); transition:.25s; } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--cyan-500); box-shadow: var(--ring); outline:none; } .field textarea{ min-height: 130px; resize: vertical; } .form-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px,3vw,34px); box-shadow: var(--shadow-sm); } /* ---------- 18. Service / feature cards ---------- */ .svc-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; transition:.4s var(--ease); position:relative; overflow:hidden; height:100%; } .svc-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background: var(--orange); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); } .svc-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); } .svc-card:hover::before{ transform: scaleX(1); } .svc-icon{ width:60px;height:60px; border-radius: 16px; background: var(--bg-cyan); color: var(--navy); display:grid; place-items:center; margin-bottom:18px; transition:.4s var(--ease-bounce); } .svc-card:hover .svc-icon{ background: var(--navy); color: var(--cyan); transform: rotate(-8deg) scale(1.08); } .svc-icon svg{ width:28px;height:28px; stroke: currentColor; fill:none; stroke-width:2; } .svc-card h3{ font-size: 1.2rem; } .svc-card p{ color: var(--ink-soft); font-size:.96rem; margin-bottom:0; } /* ---------- 19. Pricing ---------- */ .price-card{ background:#fff; border:1.5px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; text-align:center; transition:.4s var(--ease); position:relative; height:100%;} .price-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--cyan-300);} .price-card.featured{ background: var(--navy); color:#fff; border-color: var(--navy); transform: scale(1.03);} .price-card.featured h3, .price-card.featured .amount{ color:#fff; } .price-card.featured .price-feat li{ color: rgba(255,255,255,.85); } .price-card .ribbon{ position:absolute; top:16px; right:-34px; transform: rotate(45deg); background: var(--orange); color:#fff; font-size:.7rem; font-weight:800; padding:5px 40px; text-transform:uppercase; letter-spacing:.08em;} .price-card .amount{ font-family: var(--font-display); font-weight:900; font-size: 2.6rem; color: var(--navy); margin:10px 0;} .price-card .amount small{ font-size:1rem; color: var(--muted); font-weight:600;} .price-feat{ list-style:none; text-align:left; margin:22px 0; display:flex; flex-direction:column; gap:12px;} .price-feat li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:.95rem;} .price-feat li svg{ flex-shrink:0; width:19px;height:19px; color: var(--green); margin-top:2px;} /* ---------- 20. Job cards ---------- */ .job-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; position:relative; overflow:hidden; } .job-card::before{ content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--orange); transform:scaleY(0); transform-origin:center; transition:transform .3s var(--ease); } .job-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--cyan-300); } .job-card:hover::before{ transform:scaleY(1); } .job-logo{ width:62px;height:62px; border-radius:14px; background: var(--bg-cyan); display:grid; place-items:center; font-family:var(--font-head); font-weight:900; font-size:1.35rem; color:var(--navy); flex-shrink:0; border:1px solid var(--line-soft); } .job-card .j-body{ flex:1 1 230px; min-width:0; } /* wraps the CTA below on narrow containers (grid cells, sidebars) */ .job-card .j-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:7px; } .job-card .j-type{ font-weight:800; } .job-card .j-sector{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .job-card .j-new{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); background:var(--orange); padding:3px 9px; border-radius:100px; } .job-card h3{ font-size:1.1rem; margin:0 0 9px; line-height:1.25; } .job-card .j-meta{ display:flex; gap:7px 16px; flex-wrap:wrap; color:var(--muted); font-size:.84rem; font-weight:600; max-width:100%; } .job-card .j-meta span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; min-width:0; max-width:100%; } .job-card .j-meta svg{ width:14px; height:14px; opacity:.8; flex-shrink:0; } .job-card .j-co{ min-width:0; } .job-card .j-co b{ color:var(--navy); font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; } /* long company names truncate instead of clipping */ .job-card .j-cta{ flex-shrink:0; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:800; font-size:.9rem; color:var(--navy); background:var(--bg-cyan); border:1px solid var(--cyan-300); padding:11px 18px; border-radius:100px; transition:.25s; white-space:nowrap; } .job-card .j-cta svg{ width:16px; height:16px; transition:transform .25s; } .job-card:hover .j-cta{ background:var(--orange); border-color:var(--orange); color:#fff; } .job-card:hover .j-cta svg{ transform:translateX(3px); } @media (max-width:640px){ .job-card{ padding:18px; } .job-card .j-cta{ width:100%; justify-content:center; } } /* ---------- 21. Partner grid ---------- */ .partner-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 26px; text-align:center; transition:.4s var(--ease); } .partner-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--cyan-300); } .partner-card .p-logo{ height:64px; display:grid; place-items:center; margin-bottom:14px; } .partner-card .p-logo div{ font-family:var(--font-head); font-weight:900; font-size:1.3rem; color:var(--navy); } .partner-card .p-logo img{ max-height:60px; max-width:100%; width:auto; object-fit:contain; } .partner-card p{ font-size:.9rem; color:var(--muted); margin-bottom:14px; } .partner-card a.visit{ font-weight:700; color: var(--navy-700); font-size:.9rem; } .partner-card a.visit:hover{ color: var(--orange); } /* ---------- 22. Timeline / process ---------- */ .timeline{ position:relative; padding-left: 34px; } .timeline::before{ content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background: var(--orange);} .tl-item{ position:relative; padding-bottom: 30px; } .tl-item::before{ content:""; position:absolute; left:-28px; top:4px; width:16px;height:16px; border-radius:50%; background:#fff; border:3px solid var(--orange); } .tl-item h4{ margin:0 0 6px; } .tl-item p{ color: var(--ink-soft); margin:0; } /* ---------- 23. Reveal animations ---------- */ .reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform: none; } .reveal.d1{ transition-delay:.08s;} .reveal.d2{ transition-delay:.16s;} .reveal.d3{ transition-delay:.24s;} .reveal.d4{ transition-delay:.32s;} .reveal.d5{transition-delay:.4s;} .reveal-x{ opacity:0; transform: translateX(-30px); transition: opacity .7s var(--ease), transform .7s var(--ease);} .reveal-x.in{ opacity:1; transform:none; } .reveal-scale{ opacity:0; transform: scale(.94); transition: opacity .6s var(--ease), transform .6s var(--ease);} .reveal-scale.in{ opacity:1; transform:none; } /* ---------- 24. Keyframes ---------- */ @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6);} 70%{ box-shadow:0 0 0 8px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} } @keyframes ticker{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} } @keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-26px);} } @keyframes spin-slow{ to{ transform: rotate(360deg);} } @keyframes fade-in{ from{opacity:0;} to{opacity:1;} } @keyframes slide-up{ from{opacity:0; transform:translateY(20px);} to{opacity:1;transform:none;} } @keyframes shimmer{ 0%{ background-position: -400px 0;} 100%{ background-position: 400px 0;} } .spin-slow{ animation: spin-slow 18s linear infinite; } /* Marquee logos */ .logo-marquee{ overflow:hidden; } .logo-marquee .lm-track{ display:flex; gap:44px; align-items:center; animation: ticker 28s linear infinite; width:max-content;} .logo-marquee:hover .lm-track{ animation-play-state:paused;} .lm-item{ font-family:var(--font-head); font-weight:800; color:var(--muted); font-size:1.1rem; white-space:nowrap; opacity:.7; transition:.3s;} .lm-item:hover{ opacity:1; color:var(--navy);} /* ---------- 25. Misc utilities ---------- */ .bg-soft{ background: var(--bg-soft); } .bg-cyan{ background: var(--bg-cyan); } .bg-navy{ background: var(--navy); color:#fff; } .bg-navy h1,.bg-navy h2,.bg-navy h3{ color:#fff; } .divider{ height:1px; background: var(--line); margin: 40px 0; } .chip-list{ display:flex; gap:10px; flex-wrap:wrap; } .avatar{ width:44px;height:44px;border-radius:50%; object-fit:cover; border:2px solid var(--cyan); } .pill-stat{ display:inline-flex; align-items:center; gap:8px; background: var(--bg-cyan); color:var(--navy); padding:8px 16px; border-radius:var(--r-pill); font-weight:700; font-size:.86rem;} /* toast */ .toast{ position:fixed; bottom:24px; left:50%; transform: translateX(-50%) translateY(120%); background: var(--navy); color:#fff; padding:14px 24px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); z-index:9999; font-weight:600; transition: transform .5s var(--ease-bounce); display:flex; align-items:center; gap:10px;} .toast.show{ transform: translateX(-50%) translateY(0); } .toast svg{ width:18px;height:18px; color: var(--green); } /* skeleton loading */ .skeleton{ background: var(--line-soft); animation: skpulse 1.4s ease-in-out infinite; border-radius: var(--r-sm);} @keyframes skpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } } /* Back to top */ .to-top{ position:fixed; bottom:24px; right:24px; width:48px;height:48px; border-radius:50%; background: var(--navy); color:#fff; display:grid; place-items:center; box-shadow: var(--shadow-lg); opacity:0; visibility:hidden; transform: translateY(20px); transition:.35s var(--ease); z-index:150;} .to-top.show{ opacity:1; visibility:visible; transform:none;} .to-top:hover{ background: var(--orange); transform: translateY(-4px);} .to-top svg{ width:20px;height:20px; stroke:#fff; fill:none; stroke-width:2.5;} /* Nav responsive */ @media (max-width: 1080px){ .nav, .header-actions .search-toggle { display:none; } .burger{ display:grid; } } @media (min-width: 1081px){ .burger{ display:none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal,.reveal-x,.reveal-scale{ opacity:1 !important; transform:none !important; } } /* ============================================================= 26. EXTENDED COMPONENTS & ANIMATIONS (v2) Mega-menu · multimedia · régions · events · directory · testimonials · FAQ · reading progress · cookie bar · fx ============================================================= */ /* ---- Explicit button + badge helpers ---- */ .btn-navy{ --bg: var(--navy); --fg:#fff; } .btn-white{ --bg:#fff; --fg: var(--navy); } .badge-cyan{ background: var(--cyan); color: var(--navy); } .badge-cyan-line{ background: rgba(219,253,255,.15); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(219,253,255,.35); } /* ---- Accent text (flat) ---- */ .grad-text{ color: var(--orange); } .bg-navy .grad-text, .page-hero .grad-text, .hero .grad-text, .cta-band .grad-text, .newsletter-cta .grad-text{ color: var(--cyan-300); } /* ---- Mega-menu ---- */ .nav .has-mega{ position: static; } .nav .drop.mega{ left: var(--gutter); right: var(--gutter); width: auto; min-width: 0; max-width: var(--maxw); margin: 0 auto; padding: 26px 28px 18px; } .mega-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: 26px; } .mega-col h6{ font-family: var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color: var(--orange); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); } .mega-col:first-child{ display:grid; grid-template-columns:1fr 1fr; column-gap:14px; align-content:start; } .mega-col:first-child h6{ grid-column:1 / -1; } .mega-col a{ display:flex; align-items:center; gap:9px; padding:8px 8px; border-radius: var(--r-sm); font-weight:600; font-size:.9rem; color:var(--ink); transition:.2s; } .mega-col a:hover{ background: var(--bg-cyan); color: var(--navy-700); transform: translateX(3px); } .mega-col a .dot{ width:6px;height:6px;border-radius:50%; background:var(--orange); flex-shrink:0; } .mega-foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; } .mega-foot span{ color:var(--muted); font-weight:600; font-size:.9rem; } @media (max-width:1180px){ .nav .drop.mega{ left:8px; right:8px; } .mega-grid{ grid-template-columns:1fr 1fr; } } /* ---- Region cards ---- */ .region-card{ position:relative; border-radius: var(--r-lg); overflow:hidden; min-height:210px; display:flex; align-items:flex-end; color:#fff; box-shadow: var(--shadow); isolation:isolate; } .region-card .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform 1s var(--ease); } .region-card::after{ content:""; position:absolute; inset:0; z-index:-1; background: rgba(1,11,46,.55); } .region-card:hover .bg{ transform: scale(1.08); } .region-card .rc-body{ padding:18px 20px; } .region-card .rc-chef{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan-200); } .region-card h3{ color:#fff; margin:4px 0 6px; font-size:1.3rem; } .region-card p{ color:rgba(255,255,255,.85); font-size:.86rem; margin:0; opacity:0; max-height:0; transition:.4s var(--ease); } .region-card:hover p{ opacity:1; max-height:80px; } /* ---- Video cards ---- */ .video-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition:.4s var(--ease); } .video-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--cyan-300); } .vc-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--navy); } .vc-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); opacity:.92; } .video-card:hover .vc-thumb img{ transform: scale(1.06); } .vc-play{ position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%; background: rgba(255,255,255,.92); display:grid; place-items:center; transition:.35s var(--ease-bounce); box-shadow: var(--shadow); } .vc-play svg{ width:26px; height:26px; fill: var(--navy); margin-left:3px; } .video-card:hover .vc-play{ transform: scale(1.12); background: var(--orange); } .video-card:hover .vc-play svg{ fill:#fff; } .vc-dur{ position:absolute; bottom:10px; right:10px; background: rgba(1,11,46,.85); color:#fff; font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:6px; } .vc-body{ padding:16px 18px 20px; } .vc-body h3{ font-size:1.05rem; margin:8px 0 6px; line-height:1.3; } .vc-body p{ font-size:.88rem; margin:0; } /* ---- Podcast cards ---- */ .podcast-card{ display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:14px; box-shadow: var(--shadow-sm); transition:.35s var(--ease); } .podcast-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color:var(--cyan-300); } .pc-cover{ position:relative; width:96px; height:96px; border-radius:var(--r); overflow:hidden; flex-shrink:0; } .pc-cover img{ width:100%; height:100%; object-fit:cover; } .pc-btn{ position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%; background:rgba(1,11,46,.55); display:grid; place-items:center; transition:.3s; } .pc-btn svg{ width:18px; height:18px; fill:#fff; margin-left:2px; } .podcast-card:hover .pc-btn{ background: var(--orange); } .pc-body{ flex:1; min-width:0; } .pc-ep{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color: var(--orange); } .pc-body h3{ font-size:1.05rem; margin:4px 0 6px; } .pc-body p{ font-size:.86rem; margin:0; } /* ---- Dossier cards ---- */ .dossier-card{ position:relative; border-radius: var(--r-lg); overflow:hidden; min-height:260px; display:flex; align-items:flex-end; color:#fff; box-shadow: var(--shadow); isolation:isolate; } .dossier-card .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform 1s var(--ease); } .dossier-card::after{ content:""; position:absolute; inset:0; z-index:-1; background: rgba(1,11,46,.58); } .dossier-card:hover .bg{ transform: scale(1.07); } .dossier-card .ds-body{ padding:22px 24px; } .dossier-card h3{ color:#fff; font-family: var(--font-display); font-size:1.4rem; margin:10px 0 8px; line-height:1.15; } .dossier-card p{ color: rgba(255,255,255,.85); font-size:.9rem; margin:0; } /* ---- Events ---- */ .event-item{ display:flex; gap:20px; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:20px 22px; box-shadow: var(--shadow-sm); transition:.35s var(--ease); margin-bottom:16px; } .event-item:hover{ transform: translateX(6px); box-shadow: var(--shadow); border-color: var(--cyan-300); } .ev-date{ flex-shrink:0; width:74px; height:74px; border-radius: var(--r); background: var(--navy); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; } .ev-date .d{ font-family: var(--font-display); font-weight:900; font-size:1.7rem; line-height:1; } .ev-date .m{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--cyan-200); margin-top:2px; } .ev-body{ flex:1; } .ev-body h3{ font-size:1.12rem; margin:8px 0 6px; } .ev-body p{ font-size:.9rem; margin:0 0 8px; } .ev-meta{ display:flex; align-items:center; gap:6px; color: var(--navy-700); font-weight:700; font-size:.82rem; } .ev-meta svg{ width:15px; height:15px; stroke: var(--orange); fill:none; stroke-width:2; } /* ---- Directory / annuaire ---- */ .dir-card{ display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:16px 18px; box-shadow: var(--shadow-sm); transition:.3s var(--ease); } .dir-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--cyan-300); } .dir-logo{ width:52px; height:52px; border-radius:12px; background: var(--bg-cyan); color: var(--navy); display:grid; place-items:center; font-family: var(--font-head); font-weight:900; font-size:1.1rem; flex-shrink:0; } .dir-info{ min-width:0; flex:1; } .dir-info h4{ font-size:1rem; margin:0 0 3px; } .dir-sector{ font-size:.78rem; color: var(--muted); font-weight:600; } .dir-links{ display:flex; gap:12px; align-items:center; margin-top:6px; flex-wrap:wrap; } .dir-links a{ font-weight:700; font-size:.82rem; color: var(--navy-700); } .dir-links a:hover{ color: var(--orange); } .dir-links .muted{ font-size:.8rem; } /* ---- Testimonials ---- */ .testimonial{ position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px 24px; box-shadow: var(--shadow-sm); margin:0; transition:.35s var(--ease); overflow:hidden; } .testimonial:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--cyan-300); } .testimonial .quote-mark{ position:absolute; top:-6px; right:20px; font-family: var(--font-display); font-size:5rem; color: var(--bg-cyan); line-height:1; z-index:0; } .testimonial blockquote{ position:relative; z-index:1; margin:0 0 18px; font-size:1.02rem; color: var(--ink-soft); line-height:1.6; } .testimonial figcaption{ display:flex; align-items:center; gap:12px; } .testimonial .av-init{ width:44px; height:44px; border-radius:50%; background: var(--navy); color:#fff; display:grid; place-items:center; font-family: var(--font-head); font-weight:800; } .testimonial figcaption b{ font-family: var(--font-head); display:block; color: var(--navy); } .testimonial figcaption span{ font-size:.82rem; color: var(--muted); } /* ---- FAQ accordion ---- */ .faq-item{ background:#fff; border:1px solid var(--line); border-radius: var(--r); margin-bottom:12px; overflow:hidden; transition: border-color .3s, box-shadow .3s; } .faq-item[open]{ border-color: var(--cyan-300); box-shadow: var(--shadow-sm); } .faq-item summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family: var(--font-head); font-weight:700; color: var(--navy); font-size:1.02rem; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary:hover{ color: var(--navy-700); } .faq-ic{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background: var(--bg-cyan); color: var(--navy); display:grid; place-items:center; font-weight:800; font-size:1.2rem; transition:.3s var(--ease-bounce); } .faq-item[open] .faq-ic{ transform: rotate(135deg); background: var(--orange); color:#fff; } .faq-a{ padding:0 22px 20px; } .faq-a p{ margin:0; color: var(--ink-soft); } /* ---- CTA band (reusable) ---- */ .cta-band{ position:relative; overflow:hidden; border-radius: var(--r-xl); background: var(--navy); color:#fff; padding: clamp(30px,5vw,54px); text-align:center; } .cta-band::before{ content:""; position:absolute; width:320px;height:320px; right:-90px; top:-130px; border-radius:50%; background: var(--navy-800); } .cta-band::after{ content:""; position:absolute; width:220px;height:220px; left:-80px; bottom:-120px; border-radius:50%; background: var(--navy-700); } .cta-band > *{ position:relative; z-index:2; } .cta-band h2{ color:#fff; font-family: var(--font-display); } .cta-band p{ color: rgba(255,255,255,.85); max-width:640px; margin-inline:auto; } /* ---- Icon feature list ---- */ .feat-list{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:20px 0; } .feat-list li{ display:flex; gap:14px; align-items:flex-start; } .feat-list li .fi{ flex-shrink:0; width:38px; height:38px; border-radius:10px; background: var(--bg-cyan); color: var(--navy); display:grid; place-items:center; } .feat-list li .fi svg{ width:20px; height:20px; stroke: currentColor; fill:none; stroke-width:2; } .feat-list li b{ font-family: var(--font-head); color: var(--navy); display:block; margin-bottom:2px; } .feat-list li p{ margin:0; color: var(--ink-soft); font-size:.94rem; } /* ---- Stat ring (mini) ---- */ .mini-stat{ text-align:center; padding:18px; } .mini-stat .n{ font-family: var(--font-display); font-weight:900; font-size:2rem; color: var(--navy); } .mini-stat .n small{ color: var(--orange); } .mini-stat .l{ color: var(--muted); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; } /* ---- Footer badges ---- */ .footer-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; } /* ---- Reading progress bar ---- */ .read-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:300; transform: scaleX(0); transform-origin:left; background: var(--orange); transition: transform .1s linear; } /* ---- Cookie consent ---- */ .cookie-bar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:500; max-width: 880px; margin:0 auto; background: var(--navy-900); color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding:16px 20px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; transform: translateY(140%); opacity:0; transition:.5s var(--ease); } .cookie-bar.show{ transform:none; opacity:1; } .cookie-bar p{ margin:0; flex:1; min-width:220px; font-size:.9rem; } .cookie-bar a{ color: var(--cyan); font-weight:700; } .cookie-actions{ display:flex; gap:10px; } /* ---- p-featured partner highlight ---- */ .partner-card{ position:relative; } .partner-card.p-featured{ border-color: var(--orange); box-shadow: 0 10px 30px rgba(255,107,0,.18); } /* ---- Extra reveal variants + stagger ---- */ .reveal.d6{ transition-delay:.48s; } .reveal.d7{ transition-delay:.56s; } .reveal.d8{ transition-delay:.64s; } .reveal-blur{ opacity:0; filter: blur(10px); transform: translateY(20px); transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease); } .reveal-blur.in{ opacity:1; filter:none; transform:none; } .hover-lift{ transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .hover-lift:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* ---- Aurora glow layer (decor) ---- */ .aurora{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; } .aurora::before, .aurora::after{ content:""; position:absolute; width:40vw; height:40vw; border-radius:50%; opacity:.12; } .aurora::before{ background: var(--cyan-500); top:-15%; left:-8%; animation: float 12s ease-in-out infinite; } .aurora::after{ background: var(--orange); bottom:-18%; right:-8%; animation: float 15s ease-in-out infinite reverse; } /* ---- Pill-stat on dark ---- */ .chips-inline{ display:flex; gap:10px; flex-wrap:wrap; } @media (max-width:640px){ .event-item{ flex-direction:column; gap:14px; } .cookie-bar{ flex-direction:column; align-items:stretch; text-align:center; } .cookie-actions{ justify-content:center; } } /* ============================================================= 27. UI POLISH v3 — flat, premium refinements ============================================================= */ /* Côte d'Ivoire tricolor strip at the very top of the site */ .ci-strip{ display:flex; height:4px; width:100%; } .ci-strip i{ flex:1; display:block; } .ci-strip i:nth-child(1){ background: var(--orange); } .ci-strip i:nth-child(2){ background: #ffffff; } .ci-strip i:nth-child(3){ background: var(--green); } /* Crisper, more solid header surface */ .mainbar{ background: rgba(255,255,255,.96); } /* Refined, consistent card hover edges */ .card:hover, .svc-card:hover, .video-card:hover, .podcast-card:hover, .price-card:hover, .partner-card:hover, .dir-card:hover, .testimonial:hover, .event-item:hover, .region-card:hover{ border-color: var(--cyan-300); } /* Stat cards: flat orange accent slides in on hover */ .stat{ position:relative; overflow:hidden; } .stat::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--orange); transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease); } .stat:hover::before{ transform: scaleX(1); } /* Cleaner flat chrome */ .badge{ box-shadow:none; } .cat-chip.active, .cat-chip:hover{ box-shadow:none; } /* Cards a touch crisper on rest */ .card{ box-shadow: 0 1px 2px rgba(1,16,66,.05); } /* Mega-menu: solid flat panel */ .nav .drop, .nav .drop.mega{ box-shadow: 0 16px 40px rgba(1,16,66,.14); } /* Buttons: keep motion subtle & flat */ .btn{ box-shadow: 0 1px 2px rgba(1,16,66,.06); } .btn:hover{ box-shadow: 0 6px 16px rgba(1,16,66,.14); } /* Section headings: slightly tighter, more editorial */ .section-title{ letter-spacing:-.02em; } /* Legibility for text over photos (flat overlays are lighter than old scrims) */ .feature h2, .feature p, .feature .meta, .hero .lf-body h1, .hero .lf-body p, .region-card h3, .region-card p, .region-card .rc-chef, .dossier-card h3, .dossier-card p{ text-shadow: 0 1px 14px rgba(1,11,46,.55); } /* ============================================================= 28. ALIGNMENT & PROFESSIONAL POLISH v4 Fixes content alignment so sections read cleanly: centered heads truly centered, readable line-lengths, consistent tables, aligned grids. ============================================================= */ :root{ --border: var(--line); } /* --- Centered section heads: center the whole block, its kicker & lead --- */ .section-head.text-center{ max-width: 780px; margin-left:auto; margin-right:auto; } .section-head.text-center .kicker{ justify-content:center; } .section-head.text-center .lead, .section-head.text-center .section-title{ margin-left:auto; margin-right:auto; } .text-center .lead{ margin-left:auto; margin-right:auto; max-width: 640px; } /* --- Centered sections: constrain body text to a readable measure --- */ .section.text-center > .container > p, .bg-navy.text-center > .container > p, .bg-soft.text-center > .container > p{ max-width: 640px; margin-left:auto; margin-right:auto; } .cta-band .container > p, .cta-band > p{ max-width: 620px; margin-left:auto; margin-right:auto; } /* --- Lead paragraph: consistent readable width everywhere --- */ .lead{ max-width: 680px; } .page-hero p{ max-width: 660px; } /* --- Section rhythm: ensure heads have breathing room above content --- */ .section-head{ margin-bottom: 32px; } .rule-head{ margin-bottom: 24px; } /* --- Grids: align tops so uneven cells don't look broken --- */ .grid.g-2, .grid.g-3, .grid.g-4{ align-items: stretch; } .grid.g-2 > *, .grid.g-3 > *, .grid.g-4 > *{ min-width: 0; } /* --- Clean, aligned data tables (no inline styles needed) --- */ .data-table{ width:100%; border-collapse:collapse; font-size:.95rem; } .data-table thead th{ text-align:left; font-family:var(--font-head); font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:14px 16px; border-bottom:2px solid var(--line); white-space:nowrap; } .data-table td{ padding:14px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); vertical-align:top; } .data-table tbody tr:last-child td{ border-bottom:none; } .data-table tbody tr{ transition: background .15s; } .data-table tbody tr:hover td{ background:var(--bg-soft); } .data-table td b, .data-table td strong{ color:var(--navy); font-weight:800; } .table-frame{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-xs, var(--shadow-sm)); } .table-frame .table-wrap{ overflow-x:auto; } /* --- Prose (article/legal): comfortable measure & left alignment --- */ .prose{ max-width: 72ch; } .article-layout .prose{ max-width: none; } /* --- Buttons row: consistent alignment & wrapping --- */ .section.text-center .btn, .cta-band .btn{ vertical-align:middle; } /* ============================================================= 29. JOB DETAIL PAGE (emploi.html) ============================================================= */ .job-hero{ display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; margin-top:18px; } .job-cover{ width:100%; height:clamp(130px,22vw,210px); border-radius:var(--r-lg); overflow:hidden; margin:10px 0 22px; border:1px solid var(--line); box-shadow:var(--shadow-sm); } .job-cover img{ width:100%; height:100%; object-fit:cover; display:block; } .job-hero-logo{ width:78px; height:78px; border-radius:16px; background:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:900; font-size:1.8rem; color:var(--navy); overflow:hidden; flex-shrink:0; box-shadow:var(--shadow-sm); } .job-hero-logo.has-img{ padding:0; } .job-hero-logo img{ width:100%; height:100%; object-fit:cover; } .job-badges{ display:flex; gap:8px; flex-wrap:wrap; } .job-hero-main h1{ color:#fff; font-family:var(--font-display); font-size:clamp(1.5rem,3.2vw,2.3rem); margin:10px 0 6px; line-height:1.15; } .job-hero-meta{ color:rgba(255,255,255,.85); font-weight:600; margin:0; } .job-hero-cta{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right; } .job-salary span{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan-200); font-weight:800; } .job-salary b{ color:#fff; font-family:var(--font-head); font-size:1.15rem; } .job-deadline{ font-size:.78rem; color:rgba(255,255,255,.72); } @media(max-width:840px){ .job-hero{ grid-template-columns:auto 1fr; } .job-hero-cta{ grid-column:1/-1; flex-direction:row; align-items:center; flex-wrap:wrap; text-align:left; gap:14px; } .job-salary span{ display:inline; } } .job-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); } .jf{ background:#fff; padding:16px 18px; display:flex; gap:12px; align-items:center; } .jf-ic{ width:38px; height:38px; border-radius:10px; background:var(--bg-cyan); color:var(--navy); display:grid; place-items:center; flex-shrink:0; } .jf-ic svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; } .jf-txt b{ display:block; font-family:var(--font-head); color:var(--navy); font-size:.92rem; line-height:1.25; } .jf-txt span{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:700; } .job-section{ margin-bottom:30px; } .job-section > h2{ font-size:1.3rem; margin-bottom:14px; position:relative; padding-left:15px; } .job-section > h2::before{ content:""; position:absolute; left:0; top:5px; bottom:5px; width:5px; border-radius:5px; background:var(--orange); } .job-section > p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.75; } .check-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; } .check-list li{ position:relative; padding-left:32px; color:var(--ink-soft); line-height:1.55; } .check-list li::before{ content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--bg-cyan); } .check-list li::after{ content:""; position:absolute; left:7px; top:5px; width:5px; height:9px; border:solid var(--green); border-width:0 2px 2px 0; transform:rotate(45deg); } .about-company{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; } .about-company > h2{ padding-left:0; } .about-company > h2::before{ display:none; } .job-summary li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem; } .job-summary li:last-child{ border-bottom:none; } .job-summary li span{ color:var(--muted); font-weight:600; } .job-summary li b{ color:var(--navy); text-align:right; } /* Unified share bar (articles, jobs, any content) */ .share-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .share-bar .share-btn{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--navy); border:none; cursor:pointer; transition:transform .2s, box-shadow .2s, filter .2s; padding:0; } .share-bar .share-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); filter:brightness(1.05); } .share-bar .share-btn:active{ transform:translateY(0); } .share-bar .share-btn svg{ width:17px; height:17px; fill:currentColor; } .share-btn.sb-facebook{ background:#1877f2; } .share-btn.sb-x{ background:#0f1419; } .share-btn.sb-whatsapp{ background:#25d366; } .share-btn.sb-linkedin{ background:#0a66c2; } .share-btn.sb-telegram{ background:#0088cc; } .share-btn.sb-email{ background:#5b6472; } .share-btn.sb-copy, .share-btn.sb-native{ background:var(--navy-800); } .share-btn.sb-copy svg, .share-btn.sb-native svg{ fill:none; stroke:currentColor; stroke-width:2; } /* Social "follow" pills (contact page) */ .social-pill{ display:inline-flex; align-items:center; gap:8px; } .social-pill svg{ width:16px; height:16px; fill:currentColor; } /* ---------- Revue de presse (curated global news) ---------- */ .cur-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; height:100%; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; } .cur-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--cyan-300); } .media-embed{ position:relative; width:100%; aspect-ratio:16/9; background:var(--navy); } .media-embed iframe, .media-embed video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; background:#000; } .cur-media{ width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft); } .cur-media img{ width:100%; height:100%; object-fit:cover; display:block; } .cur-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; } .cur-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.72rem; font-weight:700; } .cur-kind{ text-transform:uppercase; letter-spacing:.06em; color:var(--navy-700); position:relative; padding-left:12px; } .cur-kind::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:var(--orange); } .cur-cat{ text-transform:uppercase; letter-spacing:.05em; color:var(--navy-700); background:var(--bg-cyan); border:1px solid var(--cyan-300); padding:2px 9px; border-radius:100px; } .cur-date{ margin-left:auto; color:var(--muted); font-weight:600; } .cur-title{ font-family:var(--font-head); font-size:1.16rem; line-height:1.3; margin:0; letter-spacing:-.01em; } .cur-title a{ color:var(--navy); transition:color .2s; display:inline; } .cur-title a:hover{ color:var(--orange); } .cur-ext{ color:var(--orange); font-weight:800; margin-left:5px; font-size:.85em; } .cur-excerpt{ color:var(--ink-soft, var(--muted)); font-size:.94rem; margin:0; } .cur-attrib{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:.82rem; color:var(--muted); font-weight:600; margin-top:2px; padding-top:12px; border-top:1px solid var(--line-soft); } .cur-attrib .cur-source{ min-width:0; overflow-wrap:anywhere; } .cur-attrib .cur-source a{ color:var(--navy-700); font-weight:800; text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--cyan-300); overflow-wrap:anywhere; } .cur-attrib .cur-source a:hover{ text-decoration-color:var(--orange); color:var(--orange); } .cur-attrib .cur-editor{ position:relative; padding-left:15px; } .cur-attrib .cur-editor::before{ content:"·"; position:absolute; left:5px; color:var(--muted); font-weight:800; } .cur-refs{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; padding-top:12px; } .cur-refs-list a{ overflow-wrap:anywhere; } .cur-refs-lbl{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .cur-refs-list{ display:inline-flex; flex-wrap:wrap; gap:6px; } .cur-refs-list a{ font-size:.76rem; font-weight:700; color:var(--navy-700); background:var(--bg-soft); border:1px solid var(--line); border-radius:100px; padding:3px 10px; transition:.2s; } .cur-refs-list a:hover{ background:var(--bg-cyan); border-color:var(--cyan-300); color:var(--navy); } /* ---------- Video player card (uploaded / embedded) ---------- */ .video-card.has-player{ display:flex; flex-direction:column; padding:0; overflow:hidden; } .video-card.has-player .media-embed{ border-radius:0; } .video-card.has-player .vc-body{ padding:16px 18px 18px; } .video-feature .vf-media{ position:relative; } .video-feature .vf-media .media-embed{ height:100%; aspect-ratio:auto; min-height:320px; } .video-feature .vf-media video, .video-feature .vf-media iframe{ position:absolute; inset:0; width:100%; height:100%; } @media (max-width:760px){ .video-feature{ grid-template-columns:1fr !important; } .video-feature .vf-media .media-embed{ min-height:0; aspect-ratio:16/9; } } /* ---------- Podcast audio player ---------- */ .podcast-card.has-audio .pc-cover .pc-btn{ display:none; } .pc-audio{ width:100%; margin-top:14px; height:40px; } .pc-audio::-webkit-media-controls-panel{ background:var(--bg-cyan); } /* apply CTA (InfoChap · Postule ChapChap) */ .apply-cta{ margin-top:8px; } .apply-slogan{ display:inline-block; font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--cyan-200); background:rgba(255,255,255,.10); padding:7px 16px; border-radius:var(--r-pill); } .apply-cta h2{ color:#fff; margin:14px 0 6px; font-family:var(--font-display); } .apply-cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; } .apply-cta-btns .btn{ text-transform:none; } .apply-cta-meta{ margin:18px 0 0; font-size:.85rem; color:rgba(255,255,255,.72); } /* legacy apply-contact block (kept for reuse) */ .apply-contact{ background:var(--bg-cyan); border:1px solid var(--cyan-300); border-radius:var(--r); padding:16px 18px; margin:6px 0 18px; } .apply-contact p{ margin:0 0 10px; font-weight:700; color:var(--navy); font-size:.92rem; } .apply-links{ display:flex; gap:8px; flex-wrap:wrap; } .apply-links .btn{ text-transform:none; } /* job-logo with uploaded/company image (listing cards) — contain so logos aren't cropped */ .job-logo.has-img{ padding:0; overflow:hidden; background:#fff; } .job-logo.has-img img{ width:100%; height:100%; object-fit:contain; padding:7px; } /* default InfoChap job badge (INFO CHAP 2) fills its box */ .job-logo.has-badge, .job-hero-logo.has-badge{ background:transparent; border:none; padding:0; overflow:hidden; } .job-logo.has-badge svg, .job-hero-logo.has-badge svg{ width:100%; height:100%; display:block; } .job-hero-logo.has-img img{ object-fit:contain; padding:8px; } .job-card .j-meta .j-sal{ font-weight:800; color:var(--navy-700); } /* Blog International — topic filter tabs */ .blog-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; } .blog-tab{ font-family:var(--font-head); font-weight:700; font-size:.85rem; padding:9px 18px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; transition:border-color .18s ease,color .18s ease,background .18s ease; } .blog-tab:hover{ border-color:var(--orange); color:var(--orange); } .blog-tab.active{ background:var(--navy); border-color:var(--navy); color:#fff; } /* Photo gallery */ .gallery-grid .gallery-item{ position:relative; margin:0; padding:0; overflow:hidden; border-radius:var(--r-lg); aspect-ratio:4/3; box-shadow:0 4px 16px rgba(1,16,66,.08); } .gallery-grid .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s var(--ease); } .gallery-grid .gallery-item:hover img{ transform:scale(1.07); } .gallery-cap{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:30px 14px 12px; color:#fff; font-size:.85rem; font-weight:600; line-height:1.35; background:linear-gradient(to top, rgba(1,16,66,.9), rgba(1,16,66,0)); } /* Long strings (e-mails, URLs) must wrap — never overflow the layout on narrow phones */ .footer-contact a, .footer-contact .fc-addr, .dir-links a, .cur-refs-list a, .cur-source a, .cur-attrib a, .data-table td, .hitem h4, .card .excerpt { overflow-wrap:anywhere; } /* Phone polish */ @media (max-width:520px){ .data-table td, .data-table thead th{ padding:11px 12px; } .stats{ grid-template-columns:1fr 1fr; } .cta-band .btn, .newsletter-cta .btn, .footer-cta .btn{ width:100%; justify-content:center; } } /* password reveal on the recruiter login */ .pw-wrap{ position:relative; display:flex; align-items:center; } .pw-wrap input{ flex:1; padding-right:88px; } .pw-toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:var(--bg-soft,#eef1fa); border:1px solid var(--line); border-radius:8px; padding:5px 10px; font-size:.78rem; font-weight:700; color:var(--navy-700); cursor:pointer; transition:.2s var(--ease); } .pw-toggle:hover{ background:#fff; border-color:var(--cyan-300); } /* ---------- Espace recruteur certifié — tableau de bord ---------- */ #recRoot.rec-wide{ display:block !important; } #recRoot.rec-wide > aside{ display:none; } .rec-hero{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:linear-gradient(120deg,var(--navy) 0%,var(--navy-700) 100%); color:#fff; border-radius:var(--r-xl); padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-lg); position:relative; overflow:hidden; } .rec-hero::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(55,200,219,.28),transparent 70%); pointer-events:none; } .rec-hero-main{ position:relative; z-index:1; min-width:0; } .rec-hero-main h1{ color:#fff; font-size:clamp(1.5rem,3vw,2rem); margin:8px 0 4px; } .rec-hero-main p{ color:rgba(255,255,255,.82); margin:0; font-size:.95rem; } .rec-hero-main p b{ color:#fff; } .rec-hero-badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(55,200,219,.2); border:1px solid rgba(55,200,219,.5); color:var(--cyan-200); font-family:var(--font-head); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:4px 12px; border-radius:99px; } .rec-logout{ position:relative; z-index:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700; font-size:.85rem; padding:10px 18px; border-radius:99px; transition:.2s var(--ease); white-space:nowrap; } .rec-logout:hover{ background:rgba(255,255,255,.22); } .rec-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:22px 0; } .rec-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-xs); } .rec-tile-n{ display:block; font-family:var(--font-display,var(--font-head)); font-weight:900; font-size:2rem; line-height:1; color:var(--navy); font-variant-numeric:tabular-nums; } .rec-tile-n i{ font-style:normal; font-size:1.1rem; color:var(--muted); font-weight:700; } .rec-tile-l{ display:block; margin-top:6px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .rec-tile.is-ok .rec-tile-n{ color:var(--green); } .rec-tile.is-warn .rec-tile-n{ color:var(--orange); } .rec-quota{ height:7px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:12px; } .rec-quota-fill{ height:100%; background:var(--cyan-500); border-radius:99px; transition:width .6s var(--ease); } .rec-bar{ display:flex; align-items:center; gap:16px; margin:6px 0 16px; flex-wrap:wrap; } .rec-back{ background:var(--bg-soft,#eef1fa); border:1px solid var(--line); color:var(--navy-700); font-weight:700; font-size:.85rem; padding:8px 14px; border-radius:99px; transition:.2s var(--ease); } .rec-back:hover{ background:#fff; border-color:var(--cyan-300); } .rec-editor{ max-width:760px; } .rec-editor .grid.g-2{ gap:1rem; } .rec-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start; } .rec-offers{ display:flex; flex-direction:column; gap:12px; } .rec-offer{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-xs); transition:.2s var(--ease); } .rec-offer:hover{ box-shadow:var(--shadow); border-color:var(--cyan-300); } .rec-offer-main{ min-width:0; } .rec-offer-top{ display:flex; gap:6px; margin-bottom:6px; } .rec-offer-title{ display:block; font-family:var(--font-head); font-weight:800; color:var(--navy); font-size:1rem; overflow-wrap:anywhere; } .rec-offer-sub{ display:block; font-size:.82rem; color:var(--muted); margin-top:2px; } .rec-offer-act{ display:flex; gap:8px; flex:none; } .rec-empty{ background:#fff; border:1px dashed var(--line); border-radius:var(--r-lg); padding:34px 20px; text-align:center; } .rec-empty p{ margin:0 0 4px; } .rec-post{ position:sticky; top:96px; } .rec-pill{ display:inline-flex; align-items:center; font-family:var(--font-head); font-weight:800; font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; padding:3px 10px; border-radius:99px; } .rec-pill-ok{ background:rgba(0,166,81,.14); color:var(--green-600,#008f46); } .rec-pill-warn{ background:rgba(255,107,0,.14); color:var(--orange-600); } .rec-pill-done{ background:var(--bg-soft,#eef1fa); color:var(--muted); } .rec-pill-bad{ background:rgba(225,29,42,.13); color:var(--red); } .rec-pill-urgent{ background:var(--orange); color:#fff; } @media (max-width:820px){ .rec-stats{ grid-template-columns:1fr 1fr; } .rec-grid{ grid-template-columns:1fr; } .rec-post{ position:static; } } @media (max-width:480px){ .rec-offer{ flex-direction:column; align-items:flex-start; } .rec-offer-act{ width:100%; } } /* ---------- Recruteur certifié ---------- */ .j-certif{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:2px 8px; border-radius:99px; background:rgba(55,200,219,.16); color:var(--navy-700); font-family:var(--font-head); font-weight:800; font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; } .j-certif::before{ content:"✓"; font-weight:900; color:var(--cyan-600); } .j-urgent{ background:var(--orange); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.64rem; text-transform:uppercase; letter-spacing:.03em; padding:2px 9px; border-radius:99px; } /* ---------- Tribunes ---------- */ .tribune-card .meta{ font-size:.82rem; color:var(--muted); font-weight:600; margin:6px 0 10px; } .tribune-card h3{ font-family:var(--font-head); font-size:1.12rem; line-height:1.35; margin:10px 0 0; } .tribune-full{ margin-top:12px; border-top:1px solid var(--line-soft); padding-top:10px; } .tribune-full > summary{ cursor:pointer; font-weight:700; font-size:.88rem; color:var(--navy-700); list-style:none; } .tribune-full > summary::-webkit-details-marker{ display:none; } .tribune-full > summary::after{ content:" ↓"; } .tribune-full[open] > summary::after{ content:" ↑"; } .tribune-full > summary:hover{ color:var(--orange); } .tribune-full .prose{ margin-top:10px; font-size:.94rem; } .tribune-full .prose p{ margin:0 0 .8em; } /* ---------- Sondages ---------- */ .poll-card{ padding: 2rem; } .poll-card .poll-q{ margin:1rem 0 .3rem; font-family: var(--font-head); font-size:1.35rem; line-height:1.3; } .poll-card .poll-sub{ margin-bottom:1.4rem; } .poll-options{ display:flex; flex-direction:column; gap:.7rem; } .poll-options .poll-opt{ justify-content:flex-start; text-align:left; border-color: rgba(0,0,0,.12); width:100%; } .poll-result{ position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; padding:.75rem 1rem; } .poll-result .poll-bar{ position:absolute; inset:0 auto 0 0; opacity:.16; transition: width .8s var(--ease); } .poll-result .poll-row{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .poll-result .poll-row span{ font-weight:600; overflow-wrap:anywhere; } .poll-result .poll-row span.is-mine{ font-weight:800; } .poll-result .poll-row b{ font-weight:800; font-variant-numeric: tabular-nums; } .poll-total{ margin-top:1rem; font-size:.85rem; color: var(--muted); font-weight:600; } .poll-note{ margin-top:.7rem; font-size:.78rem; color: var(--muted); } @media (max-width:640px){ .poll-card{ padding:1.4rem; } .poll-card .poll-q{ font-size:1.15rem; } } /* ===== CRM-managed advertising spaces ===== The placeholder stays EMPTY (and therefore invisible) until main.js fills it with an activated ad. :empty is the hard guarantee a visitor never sees an inactive space. */ .ad-slot:empty{ display:none !important; } .ad-slot{ display:block; max-width: var(--maxw); margin: 30px auto; padding-inline: var(--gutter); text-align:center; } .ad-label{ display:block; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); font-weight:700; margin-bottom:6px; } .ad-unit{ display:inline-block; max-width:100%; line-height:0; border-radius: var(--r-sm); overflow:hidden; box-shadow: var(--shadow); } a.ad-unit{ transition: transform .25s ease, box-shadow .25s ease; } a.ad-unit:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); } .ad-unit img, .ad-unit video{ display:block; max-width:100%; height:auto; max-height:420px; } .ad-unit video{ width:100%; object-fit:contain; background:#000; } .ad-unit.ad-static{ cursor:default; } .ad-unit .ad-text, .ad-unit.ad-text{ display:block; line-height:1.5; padding:16px 22px; background: var(--bg-soft); color: var(--navy); font-weight:600; border-radius: var(--r-sm); } /* Hard ceiling on every ad frame: whatever the CRM (or tampered data) asks for, an ad can never dominate the viewport — reader attention and bounce rate come first. */ @media (max-width:640px){ .ad-slot{ margin:20px auto; } .ad-unit img, .ad-unit video{ max-height:300px; } } /* Print */ @media print{ .site-header,.site-footer,.to-top,.ticker,.newsletter-cta,.read-progress,.cookie-bar,.ci-strip,.ad-slot{ display:none !important; } }