/* fonts.css is linked in BEFORE this file (parallel load, faster FCP) */ /* ============================================================ META — Avocat · Law Firm | Refonte PACIFIK'AI Design system fidèle à l'identité META (navy #124B7E) + élévation ============================================================ */ /* ---------- Tokens ---------- */ :root{ /* Brand — navy is the META signature (the logo background) */ --navy:#124B7E; --navy-600:#0E3C66; --navy-700:#0B2E4F; --navy-800:#0A2138; --navy-900:#081A2E; --ink-navy:#06121F; /* deepest, for dark sections */ /* Accents — their bright blues */ --blue:#228AE6; /* fonds, dots, hover, focus — pas le texte sur blanc */ --blue-ink:#1C6FBE; /* bleu-texte AA (4.6:1 sur blanc) — eyebrows/labels */ --blue-bright:#0693E3; --blue-300:#6FB8F7; --blue-100:#CBE5FB; /* Neutrals */ --ink:#13202E; /* headings on light */ --body:#3C4A5C; /* body text (AA on white) */ --slate:#566581; /* muted — AA (5.4:1 sur blanc) */ --slate-300:#8D99AE; /* RÉSERVÉ bordures/dividers — JAMAIS texte sur blanc */ --line:#DCE6F2; --line-soft:#EEF3F9; --paper:#FFFFFF; --paper-2:#F6F9FD; --paper-3:#EFF4FA; /* Effects */ --grad-brand:linear-gradient(135deg,#1A66B0 0%,#228AE6 100%); --grad-deep:linear-gradient(150deg,#0A2138 0%,#124B7E 60%,#1A66B0 100%); --grad-ink:linear-gradient(160deg,#06121F 0%,#0B2E4F 100%); --shadow-sm:0 1px 2px rgba(10,33,56,.06), 0 2px 8px rgba(10,33,56,.05); --shadow:0 6px 18px -6px rgba(10,33,56,.16), 0 10px 40px -12px rgba(10,33,56,.12); --shadow-lg:0 20px 50px -20px rgba(10,33,56,.30); --shadow-blue:0 14px 40px -14px rgba(34,138,230,.55); /* Type */ --serif:'Spectral', Georgia, 'Times New Roman', serif; --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Layout */ --container:1200px; --container-wide:1320px; --gutter:clamp(1.15rem, 4vw, 2.5rem); --radius:14px; --radius-lg:22px; --radius-pill:999px; --section-y:clamp(4rem, 9vw, 8rem); --section-y-dark:clamp(5rem, 11vw, 9.5rem); --card-pad:clamp(1.6rem, 3vw, 2rem); --grid-gap:1.4rem; --header-h:74px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--sans); color:var(--body); background:var(--paper); line-height:1.65; font-size:clamp(1rem,.97rem + .15vw,1.075rem); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,canvas{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;background:none;border:none} ul{list-style:none} :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px} .dark :focus-visible,.hero :focus-visible,.topbar :focus-visible,.footer :focus-visible,.mobile-menu :focus-visible,.page-hero :focus-visible{outline-color:#fff} ::selection{background:var(--navy);color:#fff} /* ---------- Typography ---------- */ h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.08;font-weight:700;letter-spacing:-.01em} h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.5rem);font-weight:800;letter-spacing:-.025em} h2{font-size:clamp(1.95rem,1.4rem + 2.4vw,3.1rem);font-weight:700} h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)} h4{font-size:1.18rem} p{max-width:68ch} strong{color:var(--ink);font-weight:600} /* Signature META blue keyword highlight (carried from original) */ .hl{color:var(--navy);font-weight:600;background:linear-gradient(transparent 62%,rgba(34,138,230,.16) 0);padding:0 .04em} .dark .hl{color:#9ED1FB;background:linear-gradient(transparent 62%,rgba(34,138,230,.28) 0)} /* ---------- Layout helpers ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .container.wide{max-width:var(--container-wide)} .section{padding-block:var(--section-y)} .section--tight{padding-block:clamp(3rem,6vw,5rem)} .center{text-align:center} .eyebrow{ display:inline-flex;align-items:center;gap:.55rem; font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase; color:var(--blue-ink);margin-bottom:1.1rem; } .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--blue);display:inline-block} .dark .eyebrow{color:var(--blue-300)} .dark .eyebrow::before{background:var(--blue-300)} .lead{font-size:clamp(1.13rem,1.02rem + .5vw,1.33rem);color:var(--body);max-width:62ch;line-height:1.62} .dark .lead{color:#B8C6DA} .section-head{max-width:760px;margin-bottom:clamp(2.5rem,5vw,4rem)} .section-head.center{margin-inline:auto} .muted{color:var(--slate)} /* ---------- Buttons ---------- */ .btn{ --bg:var(--navy);--fg:#fff; display:inline-flex;align-items:center;gap:.6rem; font-family:var(--sans);font-weight:600;font-size:.97rem;letter-spacing:.01em; padding:.92rem 1.6rem;border-radius:var(--radius-pill); background:var(--bg);color:var(--fg); border:1.5px solid transparent; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .25s,border-color .25s; will-change:transform; } .btn .ico{transition:transform .35s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn:hover .ico{transform:translateX(4px)} .btn--primary{background:var(--grad-brand);box-shadow:var(--shadow-blue)} .btn--primary:hover{box-shadow:0 18px 46px -12px rgba(34,138,230,.7)} .btn--solid{background:var(--navy)} .btn--solid:hover{background:var(--navy-600)} .btn--ghost{background:transparent;color:var(--navy);border-color:rgba(18,75,126,.28)} .btn--ghost:hover{border-color:var(--navy);background:rgba(18,75,126,.04)} .dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.32)} .dark .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn--light{background:#fff;color:var(--navy)} .btn--light:hover{background:#fff;box-shadow:var(--shadow-lg)} .btn--sm{padding:.62rem 1.1rem;font-size:.88rem} .btn--lg{padding:1.05rem 1.9rem;font-size:1.03rem} .link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--navy);font-size:.95rem} .link-arrow .ico{transition:transform .35s var(--ease)} .link-arrow:hover .ico{transform:translateX(5px)} .dark .link-arrow{color:var(--blue-300)} /* ---------- Top utility bar ---------- */ .topbar{background:var(--ink-navy);color:#A9C0D8;font-size:.82rem} .topbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;padding-block:.3rem} .topbar a{color:#A9C0D8;transition:color .2s} .topbar a:hover{color:#fff} .topbar__left{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap} .topbar__left a{display:inline-flex;align-items:center;gap:.45rem} .topbar__right{display:flex;align-items:center;gap:1.1rem} .lang{display:flex;align-items:center;gap:.05rem} .lang button{color:#9DB3CC;font-weight:600;font-size:.8rem;min-height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center;padding:.3rem .45rem;border-radius:6px;transition:color .2s,background .2s} .lang button[aria-current="true"]{color:#fff;background:rgba(255,255,255,.1)} .lang button[aria-disabled="true"]{opacity:.7} .lang button:hover{color:#fff} .topbar__socials{display:flex;gap:.2rem} .topbar__socials a{opacity:.85;min-height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px} .topbar__socials a:hover{opacity:1;background:rgba(255,255,255,.08)} @media (max-width:760px){.topbar__left .tb-email{display:none}.topbar__socials{display:none}} @media (max-width:520px){.topbar__left .tb-addr{display:none}.lang{display:none}} /* ---------- Header / Nav ---------- */ .header{ position:sticky;top:0;z-index:80; background:#0A2138; /* navy opaque = couleur du haut du hero → nav blanche lisible + cohérence topbar/hero */ transition:background .35s var(--ease),box-shadow .35s,backdrop-filter .35s,border-color .35s; border-bottom:1px solid rgba(255,255,255,.07); } .header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h)} .header.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);border-bottom-color:var(--line)} .brand{display:flex;align-items:center;gap:.7rem;z-index:2} .brand__mark{font-family:var(--serif);font-weight:800;font-size:1.7rem;letter-spacing:.14em;color:#fff;line-height:1} .brand__tag{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-300);font-weight:600;margin-top:.18rem} .header.solid .brand__mark{color:var(--navy)} .header.solid .brand__tag{color:var(--slate)} .brand__lock{display:flex;flex-direction:column;line-height:1} .nav{display:flex;align-items:center;gap:.35rem} .nav__item{position:relative} .nav__link{ display:inline-flex;align-items:center;gap:.35rem; padding:.6rem .85rem;border-radius:8px; color:rgba(255,255,255,.86);font-weight:500;font-size:.95rem; transition:color .2s,background .2s; } .nav__link:hover{color:#fff} .header.solid .nav__link{color:var(--body)} .header.solid .nav__link:hover{color:var(--navy);background:var(--paper-2)} .nav__link .chev{width:11px;height:11px;opacity:.7;transition:transform .25s} .nav__item:hover .chev{transform:rotate(180deg)} .nav__link.is-active{color:#fff} .header.solid .nav__link.is-active{color:var(--navy)} /* Dropdown */ .dropdown{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px); min-width:300px;background:#fff;border:1px solid var(--line);border-radius:16px; box-shadow:var(--shadow-lg);padding:.6rem; opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease); z-index:90; } .nav__item:hover .dropdown,.nav__item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .dropdown::before{content:"";position:absolute;top:-9px;left:0;right:0;height:12px} .dropdown__group+.dropdown__group{margin-top:.2rem;border-top:1px solid var(--line-soft);padding-top:.2rem} .dropdown__label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:700;padding:.5rem .8rem .2rem} .dropdown a{ display:flex;flex-direction:column;gap:.1rem; padding:.6rem .8rem;border-radius:10px;transition:background .18s; } .dropdown a:hover{background:var(--paper-2)} .dropdown a strong{color:var(--navy);font-weight:600;font-size:.95rem;font-family:var(--sans)} .dropdown a span{font-size:.82rem;color:var(--slate)} .header__cta{display:flex;align-items:center;gap:.8rem} .nav-toggle{display:none;width:46px;height:46px;border-radius:11px;align-items:center;justify-content:center;color:#fff} .header.solid .nav-toggle{color:var(--navy)} .nav-toggle span{position:relative;width:22px;height:2px;background:currentColor;transition:transform .3s,background .3s} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .3s,top .3s} .nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px} @media (max-width:1080px){ .nav,.header__cta .btn--rdv{display:none} .nav-toggle{display:flex} } /* Mobile menu */ .mobile-menu{ position:fixed;inset:0;z-index:100;background:var(--grad-ink);color:#fff; padding:calc(var(--header-h) + 2rem) var(--gutter) 2.5rem; transform:translateY(-100%);transition:transform .5s var(--ease); overflow-y:auto;display:flex;flex-direction:column; } .mobile-menu.open{transform:translateY(0)} .mobile-menu__close{position:absolute;top:1.3rem;right:var(--gutter);width:46px;height:46px;color:#fff;font-size:1.6rem;display:flex;align-items:center;justify-content:center} .mobile-menu nav{display:flex;flex-direction:column;gap:.1rem;margin-top:1rem} .mobile-menu .m-link{font-family:var(--serif);font-size:1.5rem;font-weight:600;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;display:flex;justify-content:space-between;align-items:center} .mobile-menu .m-sub{font-family:var(--sans);font-size:.95rem;font-weight:500;color:#9FB6CE;padding:.4rem 0 .4rem 1rem} .mobile-menu .m-foot{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:1rem} .mobile-menu .m-foot .btn{justify-content:center} /* ---------- Hero ---------- */ .hero{position:relative;background:var(--grad-deep);color:#fff;overflow:hidden;isolation:isolate} .hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1} .hero::after{ /* vignette + grain */ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(120% 90% at 70% 10%,transparent 40%,rgba(6,18,31,.55) 100%); } .hero__inner{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(4rem,9vw,7rem);display:grid;gap:2rem;max-width:920px} .hero__eyebrow{color:var(--blue-300)} .hero h1{color:#fff} .hero h1 .accent{ background:linear-gradient(120deg,#6FB8F7,#CBE5FB); -webkit-background-clip:text;background-clip:text;color:transparent; font-style:italic;font-weight:700; } .hero__sub{font-size:clamp(1.1rem,1rem + .55vw,1.4rem);color:#C6D6E8;max-width:60ch;line-height:1.6} .hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem} .hero__pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem} .pill{ display:inline-flex;align-items:center;gap:.5rem; padding:.5rem 1rem;border-radius:var(--radius-pill); background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); font-size:.85rem;color:#D7E4F2;font-weight:500;backdrop-filter:blur(4px); } .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--blue-300);box-shadow:0 0 10px var(--blue-300)} .hero__cred{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);color:#CBD9EA;font-size:.84rem;letter-spacing:.01em} .hero__cred span{display:inline-flex;align-items:center;gap:.5rem} .hero__cred span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-300)} .scroll-cue{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);color:#BFD0E4;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-shadow:0 1px 6px rgba(6,18,31,.4)} .scroll-cue .bar{width:1.5px;height:34px;background:linear-gradient(var(--blue-300),transparent);animation:scrollpulse 2s var(--ease) infinite} @keyframes scrollpulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} @media (max-width:540px){.scroll-cue{display:none}} /* ---------- Marquee strip (practice keywords, carried from original) ---------- */ .strip{background:var(--ink-navy);color:#90A8C2;border-block:1px solid rgba(255,255,255,.06);overflow:hidden} .strip__track{display:flex;gap:0;white-space:nowrap;animation:marquee 38s linear infinite;will-change:transform} .strip:hover .strip__track{animation-play-state:paused} .strip__track span{display:inline-flex;align-items:center;padding:.9rem 0;font-size:.9rem;font-weight:500;letter-spacing:.02em} .strip__track span::after{content:"•";margin-inline:1.4rem;color:var(--blue);opacity:.6} @keyframes marquee{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.strip__track{animation:none;white-space:normal;flex-wrap:wrap;justify-content:center;gap:.2rem 0}} /* ---------- Dark sections — more breathing room + subtle top edge ---------- */ .values,.maeva,.intl{padding-block:var(--section-y-dark)} .values::before,.maeva::before,.intl::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,138,230,.35),transparent);z-index:2} /* ---------- Values / META etymology (dark editorial) ---------- */ .values{background:var(--grad-ink);color:#fff;position:relative;overflow:hidden} .values h2{color:#fff} .values__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center} .meta-glyph{font-family:var(--serif);font-weight:800;font-size:clamp(3.4rem,10vw,6.5rem);line-height:.95; background:linear-gradient(150deg,#9ED1FB,#1A66B0);-webkit-background-clip:text;background-clip:text;color:transparent; position:relative;letter-spacing:-.02em; } .meta-etym{color:#9FB6CE;font-style:italic;font-family:var(--serif);font-size:1.15rem;margin-top:1rem} .values blockquote{font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);line-height:1.3;color:#EAF2FB;font-weight:500;margin:1.5rem 0} .values blockquote .q{color:var(--blue-300)} @media (max-width:860px){.values__grid{grid-template-columns:1fr;text-align:left}.meta-glyph{font-size:4rem}} /* ---------- Axes (Conseil/Contentieux/Formation) ---------- */ .axes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:1rem} .axis{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad);box-shadow:var(--shadow-sm); position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s; } .axis::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)} .axis:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .axis:hover::before{transform:scaleX(1)} .axis__n{position:absolute;top:1.1rem;right:1.4rem;font-family:var(--serif);font-size:3.2rem;font-weight:800;color:var(--line);line-height:1;opacity:.9;pointer-events:none} .axis__tag{display:inline-block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink);font-weight:700} .axis h3{margin:.55rem 0 .7rem} .axis p{color:var(--slate);font-size:.95rem;line-height:1.6;position:relative} @media (max-width:820px){.axes{grid-template-columns:1fr;gap:1rem}} /* ---------- Solutions (3 pillars) ---------- */ .solutions{background:var(--paper-2)} .sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)} .sol-card{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm); padding:var(--card-pad);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s;position:relative;overflow:hidden; } .sol-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent} .sol-card__ico{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,rgba(34,138,230,.14),rgba(18,75,126,.08));color:var(--navy);margin-bottom:1.3rem} .sol-card__ico svg{width:26px;height:26px} .sol-card h3{margin-bottom:.6rem} .sol-card>p{color:var(--slate);font-size:.96rem;margin-bottom:1.3rem} .sol-card__tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.5rem} .tag{font-size:.78rem;font-weight:500;color:var(--navy);background:var(--paper-3);border:1px solid var(--line); padding:.32rem .7rem;border-radius:var(--radius-pill);transition:background .2s,color .2s} .sol-card:hover .tag{background:#fff} .sol-card__foot{margin-top:auto} @media (max-width:980px){.sol-grid{grid-template-columns:1fr;gap:1.1rem}} /* ---------- Needs (Vos besoins) ---------- */ .needs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)} .need{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:var(--card-pad);transition:transform .35s var(--ease),box-shadow .35s} .need:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .need__tag{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue-ink)} .need h3{margin:.6rem 0 1rem;font-size:1.4rem} .need ul{display:flex;flex-direction:column;gap:.7rem} .need li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--body)} .need li svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:var(--blue)} @media (max-width:980px){.needs-grid{grid-template-columns:1fr}} /* ---------- Léo profile ---------- */ .profile{background:var(--paper)} .profile__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start} .profile__media{position:sticky;top:calc(var(--header-h) + 2rem)} .portrait{width:clamp(132px,30vw,154px);aspect-ratio:1;border-radius:50%;overflow:hidden; border:4px solid #fff;box-shadow:var(--shadow-lg),0 0 0 1px var(--line);background:var(--paper-2);margin-inline:auto} .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%} .portrait__name{text-align:center;margin-top:1rem} .portrait__name strong{font-family:var(--serif);font-size:1.45rem;display:block;font-weight:700;color:var(--ink)} .portrait__name span{font-size:.88rem;color:var(--slate)} .profile__socials{display:flex;gap:.6rem;margin-top:1.1rem;justify-content:center} .icon-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--navy);transition:background .2s,transform .2s,color .2s,border-color .2s} .icon-btn:hover{background:var(--navy);color:#fff;transform:translateY(-2px);border-color:var(--navy)} .icon-btn svg{width:18px;height:18px} .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0} .chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.83rem;font-weight:500;color:var(--navy); background:var(--paper-2);border:1px solid var(--line);padding:.45rem .85rem;border-radius:var(--radius-pill)} .chip svg{width:15px;height:15px;color:var(--blue)} .timeline{margin-top:1.8rem;border-left:2px solid var(--line);padding-left:1.6rem;display:flex;flex-direction:column;gap:1.3rem} .timeline li{position:relative} .timeline li::before{content:"";position:absolute;left:calc(-1.6rem - 6px);top:.45rem;width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--blue)} .timeline .yr{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:.95rem} .timeline .ev{color:var(--body);font-size:.95rem} .langs{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem} .langs .l{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 1rem;background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px} .langs .l b{font-weight:600;color:var(--ink);font-size:.95rem} .langs .l span{font-size:.78rem;color:var(--slate)} @media (max-width:880px){.profile__grid{grid-template-columns:1fr}.profile__media{position:static}.portrait{max-width:320px}} /* ---------- M.A.E.V.A. (AI assistant showpiece) ---------- */ .maeva{background:var(--grad-ink);color:#fff;position:relative;overflow:hidden} .maeva__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .badge-ai{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.05em; color:#CBE5FB;background:rgba(34,138,230,.14);border:1px solid rgba(34,138,230,.3);padding:.4rem .9rem;border-radius:var(--radius-pill);margin-bottom:1.2rem} .badge-ai .pulse{width:7px;height:7px;border-radius:50%;background:#6FBF7C;box-shadow:0 0 0 0 rgba(111,191,124,.7);animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(111,191,124,.6)}70%{box-shadow:0 0 0 9px rgba(111,191,124,0)}100%{box-shadow:0 0 0 0 rgba(111,191,124,0)}} .maeva h2{color:#fff} .maeva p{color:#B8C6DA} /* Animated M.A.E.V.A. character avatar (Pixar loop) */ .maeva-av{position:relative;width:clamp(132px,20vw,176px);aspect-ratio:1;margin-bottom:1.5rem} .maeva-av__ring{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from 0deg,var(--blue-300),#1A66B0,#6FB8F7,var(--blue-300));opacity:.55;filter:blur(7px);z-index:0;animation:spin 9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .maeva-av__media{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:1;border:3px solid rgba(255,255,255,.16);background:var(--navy);box-shadow:0 20px 50px -16px rgba(0,0,0,.55),0 0 60px -12px rgba(34,138,230,.6)} .maeva-av__media video,.maeva-av__media img{width:100%;height:100%;object-fit:cover;display:block} .maeva-av__dot{position:absolute;right:11%;bottom:11%;z-index:2;width:16px;height:16px;border-radius:50%;background:#5FCB7E;border:3px solid var(--ink-navy);box-shadow:0 0 0 0 rgba(95,203,126,.7);animation:pulse 2.2s infinite} /* chat header avatar can hold the looping video */ .chat__avatar{overflow:hidden} .chat__avatar video,.chat__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} .chat__avatar .av-letter{font-weight:700;font-family:var(--serif)} @media (prefers-reduced-motion:reduce){.maeva-av__ring{animation:none}} .maeva__feats{display:flex;flex-direction:column;gap:.9rem;margin-top:1.6rem} .maeva__feats li{display:flex;gap:.8rem;align-items:flex-start;color:#D7E4F2;font-size:.97rem} .maeva__feats svg{width:20px;height:20px;flex:none;color:var(--blue-300);margin-top:.15rem} /* Chat mock */ .chat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg); backdrop-filter:blur(10px);overflow:hidden;max-width:430px;margin-inline:auto;width:100%;position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-lg), 0 30px 80px -30px rgba(34,138,230,.5)} .chat__avatar{box-shadow:0 0 0 1px rgba(255,255,255,.18)} .chat__head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)} .chat__avatar{width:42px;height:42px;border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--serif);color:#fff;flex:none} .chat__id strong{display:block;color:#fff;font-size:.95rem;font-family:var(--sans);font-weight:600} .chat__id span{font-size:.76rem;color:#7FE0A0;display:flex;align-items:center;gap:.35rem} .chat__id span::before{content:"";width:6px;height:6px;border-radius:50%;background:#6FBF7C} .chat__body{padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;min-height:230px;max-height:320px;overflow-y:auto} .bubble{max-width:80%;padding:.7rem 1rem;border-radius:16px;font-size:.9rem;line-height:1.5;animation:bubblein .4s var(--ease) both} .bubble.bot{background:rgba(255,255,255,.08);color:#EAF2FB;border-bottom-left-radius:5px;align-self:flex-start} .bubble.user{background:var(--grad-brand);color:#fff;border-bottom-right-radius:5px;align-self:flex-end} @keyframes bubblein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .typing{display:flex;gap:.3rem;align-self:flex-start;padding:.8rem 1rem;background:rgba(255,255,255,.08);border-radius:16px;border-bottom-left-radius:5px} .typing i{width:7px;height:7px;border-radius:50%;background:#9FB6CE;animation:typing 1.2s infinite} .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s} @keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}} .chat__chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.2rem 1rem} .chat__chips button{font-size:.8rem;min-height:40px;color:#CBE5FB;background:rgba(34,138,230,.12);border:1px solid rgba(34,138,230,.3);padding:.5rem .9rem;border-radius:var(--radius-pill);transition:background .2s,transform .2s} .chat__chips button:hover{background:rgba(34,138,230,.25);transform:translateY(-1px)} .chat__note{text-align:center;font-size:.74rem;color:#8198B2;padding:.7rem 1rem;border-top:1px solid rgba(255,255,255,.08);line-height:1.45} @media (max-width:880px){.maeva__grid{grid-template-columns:1fr}.chat{margin-top:.5rem}} /* ---------- M.A.E.V.A. section showcase (no inline chat — chat is the widget) ---------- */ .maeva-show{max-width:780px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center} .maeva-show .maeva-av{margin-inline:auto} .maeva-show .badge-ai{margin-inline:auto} .maeva-show .lead{margin-inline:auto} .maeva-show .maeva__feats{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1rem 2rem;margin:1.8rem 0 2rem;text-align:left} .maeva-show .maeva__feats li{max-width:260px} .maeva-show .acro{color:#fff} /* ---------- M.A.E.V.A. floating chat widget (bottom-right, all pages) ---------- */ .mv-widget{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:95;font-family:var(--sans)} .mv-launcher{position:relative;width:64px;height:64px;border:none;background:none;padding:0;cursor:pointer;overflow:visible;display:block;transition:transform .3s var(--ease)} .mv-launcher:hover{transform:scale(1.06)} .mv-launcher__media{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.3);background:var(--navy);box-shadow:0 16px 40px -10px rgba(10,33,56,.6),0 0 30px -6px rgba(34,138,230,.5)} .mv-launcher__media video{width:100%;height:100%;object-fit:cover;display:block} .mv-launcher__dot{position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;background:#3FC368;border:3px solid #fff;z-index:3;box-shadow:0 1px 3px rgba(0,0,0,.3),0 0 0 0 rgba(63,195,104,.7);animation:pulse 2.2s infinite} .mv-launcher__x{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;font-size:1.8rem;line-height:1;z-index:2} .mv-launcher__x::before{content:"\00d7"} .mv-widget[data-open="true"] .mv-launcher__x{opacity:1;visibility:visible} .mv-widget[data-open="true"] .mv-launcher__dot{display:none} .mv-teaser{position:absolute;bottom:14px;right:calc(100% + 12px);white-space:nowrap;background:#fff;color:var(--ink);font-size:.85rem;font-weight:500;padding:.6rem .95rem;border-radius:14px 14px 4px 14px;box-shadow:var(--shadow); border:1px solid var(--line);transform:translateX(8px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;cursor:pointer} .mv-teaser.show{opacity:1;visibility:visible;transform:none} .mv-widget[data-open="true"] .mv-teaser{display:none} @media (max-width:560px){.mv-teaser{display:none}} .mv-panel{position:absolute;bottom:calc(100% + 14px);right:0;width:380px;max-width:calc(100vw - 28px);height:min(560px,calc(100vh - 130px));background:var(--grad-ink); border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;display:flex;flex-direction:column; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px -20px rgba(6,18,31,.7); transform-origin:bottom right;transform:translateY(16px) scale(.96);opacity:0;visibility:hidden; transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s} .mv-widget[data-open="true"] .mv-panel{opacity:1;visibility:visible;transform:none} .mv-panel__head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)} .mv-ava{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;border:2px solid rgba(255,255,255,.18);background:var(--navy)} .mv-ava video{width:100%;height:100%;object-fit:cover;display:block} .mv-id{flex:1;min-width:0} .mv-id strong{display:block;color:#fff;font-size:.97rem;font-weight:600} .mv-id span{font-size:.76rem;color:#7FE0A0;display:flex;align-items:center;gap:.35rem} .mv-id span::before{content:"";width:6px;height:6px;border-radius:50%;background:#6FBF7C} .mv-close{width:36px;height:36px;border-radius:9px;color:#9FB6CE;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s} .mv-close:hover{background:rgba(255,255,255,.08);color:#fff} .mv-body{flex:1;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;overflow-y:auto;scrollbar-width:thin} .mv-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.2rem 1.1rem 1rem} .mv-input{display:flex;gap:.5rem;padding:.6rem .9rem;border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)} .mv-input input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:.62rem .85rem;color:#fff;font:inherit;font-size:.9rem} .mv-input input::placeholder{color:#8198B2} .mv-input input:focus{outline:none;border-color:var(--blue);background:rgba(255,255,255,.11)} .mv-send{width:42px;height:42px;flex:none;border-radius:11px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s,transform .2s} .mv-send:hover{transform:translateY(-1px)} .mv-send:disabled{opacity:.5;cursor:default;transform:none} .mv-send svg{width:18px;height:18px} .mv-chips{padding-bottom:.4rem} .mv-note{text-align:center;font-size:.7rem;color:#8198B2;padding:.5rem 1rem .7rem;line-height:1.4} @media (max-width:480px){ .mv-panel{width:calc(100vw - 24px);height:min(70vh,calc(100vh - 110px))} .mv-launcher{width:58px;height:58px} } @media (prefers-reduced-motion:reduce){.mv-launcher__dot{animation:none}} /* ---------- Honoraires ---------- */ .fees__top{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:end;margin-bottom:2.5rem} .fee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;align-items:stretch} .fee{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.7rem;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s;position:relative} .fee:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)} .fee--feature{background:var(--grad-deep);color:#fff;border-color:transparent;transform:translateY(-6px);box-shadow:var(--shadow-blue)} .fee--feature:hover{transform:translateY(-10px)} .fee--feature .fee__label,.fee--feature .fee__desc{color:#C6D6E8} .fee--feature .fee__unit{color:#C6D6E8} .fee--feature .fee__label{color:#9ED1FB} .fee--feature .fee__price{color:#fff} .fee__reco{position:absolute;top:-11px;left:1.5rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#06121F;background:var(--blue-300);padding:.3rem .7rem;border-radius:var(--radius-pill)} .fee__label{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--blue-ink)} .fee__price{font-family:var(--serif);font-weight:800;color:var(--ink);font-size:2.1rem;line-height:1;margin:.7rem 0 .2rem} .fee__price small{font-size:.95rem;font-weight:500;color:var(--slate);font-family:var(--sans)} .fee--feature .fee__price small{color:#9FB6CE} .fee__unit{font-size:.85rem;color:var(--slate);font-weight:500} .fee__desc{font-size:.9rem;color:var(--slate);margin-top:.8rem} .fees__note{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.86rem;color:var(--slate)} .fees__note span{display:inline-flex;align-items:center;gap:.5rem} .fees__note svg{width:16px;height:16px;color:var(--blue)} @media (max-width:1080px){.fee-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:860px){.fees__top{grid-template-columns:1fr}} @media (max-width:520px){.fee-grid{grid-template-columns:1fr}} /* ---------- International / Metaverse (dark) ---------- */ .intl{background:var(--ink-navy);color:#fff;position:relative;overflow:hidden} .intl__canvas{position:absolute;inset:0;z-index:0;opacity:.5} .intl .container{position:relative;z-index:1} .intl__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center} .intl h2{color:#fff} .intl p{color:#B8C6DA} .stat-row{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2rem} .stat b{font-family:var(--serif);font-size:2.4rem;font-weight:800;color:#fff;display:block;line-height:1; background:linear-gradient(120deg,#6FB8F7,#fff);-webkit-background-clip:text;background-clip:text;color:transparent} .stat span{font-size:.85rem;color:#9FB6CE} .flags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem} .flag{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1rem;border-radius:var(--radius-pill); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:.85rem;color:#D7E4F2} .flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-300);box-shadow:0 0 8px var(--blue-300)} @media (max-width:860px){.intl__grid{grid-template-columns:1fr}} /* ---------- Contact ---------- */ .contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem)} .contact__grid>*{min-width:0} /* allow 1fr tracks to shrink below content min-content */ .contact__info{display:flex;flex-direction:column;gap:1.3rem;min-width:0} .cinfo{display:flex;gap:1rem;align-items:flex-start;min-width:0} .cinfo>div{min-width:0;overflow-wrap:anywhere} .cinfo__ico{width:48px;height:48px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,rgba(34,138,230,.14),rgba(18,75,126,.08));color:var(--navy)} .cinfo__ico svg{width:22px;height:22px} .cinfo h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-bottom:.25rem} .cinfo p,.cinfo a{color:var(--ink);font-weight:500;line-height:1.5} .cinfo a:hover{color:var(--navy)} .map{margin-top:.5rem;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);height:230px;min-width:0;max-width:100%} .map iframe{display:block;width:100%;max-width:100%;height:100%;border:0;filter:grayscale(.2)} /* form */ .form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.5rem);box-shadow:var(--shadow);min-width:0;max-width:100%} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form__row>*{min-width:0} .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem;min-width:0} .field input,.field select,.field textarea{max-width:100%} .field label{font-size:.85rem;font-weight:600;color:var(--ink)} .field label .req{color:var(--blue)} .field input,.field select,.field textarea{ font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper-2); border:1.5px solid var(--line);border-radius:11px;padding:.8rem 1rem;transition:border-color .2s,background .2s,box-shadow .2s; } .field textarea{resize:vertical;min-height:120px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(34,138,230,.12)} .field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#E0584F;background:#FEF5F4} .field__err{font-size:.78rem;color:#D6483E;display:none} .field.invalid .field__err{display:block} .consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--slate);margin-bottom:1.2rem} .consent input{width:20px;height:20px;flex:none;margin-top:.1rem;accent-color:var(--navy)} .consent a{color:var(--navy);text-decoration:underline} .form__status{display:none;padding:.9rem 1.1rem;border-radius:11px;font-size:.9rem;margin-bottom:1rem} .form__status.ok{display:block;background:#EAF7EE;color:#1E7A3D;border:1px solid #BFE6CB} .form__status.demo{display:block;background:#EAF2FB;color:var(--navy);border:1px solid var(--blue-100)} @media (max-width:980px){.contact__grid{grid-template-columns:1fr}} @media (max-width:520px){.form__row{grid-template-columns:1fr}} /* ---------- CTA band ---------- */ .cta-band{background:var(--grad-brand);color:#fff;text-align:center;border-radius:var(--radius-lg); padding:clamp(2.5rem,6vw,4rem);position:relative;overflow:hidden} .cta-band h2{color:#fff;max-width:18ch;margin-inline:auto} .cta-band p{color:rgba(255,255,255,.9);margin:1rem auto 1.8rem;max-width:52ch} .cta-band .hero__actions{justify-content:center} /* ---------- Footer ---------- */ .footer{background:var(--ink-navy);color:#8FA8C2;padding-top:clamp(3.5rem,7vw,5rem)} .footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08)} .footer__brand .brand__mark{color:#fff} .footer__brand p{color:#8FA8C2;font-size:.9rem;margin:1.1rem 0;max-width:34ch} .footer__socials{display:flex;gap:.6rem} .footer__socials a{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#B8C6DA;transition:all .2s} .footer__socials a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)} .footer__col h2{color:#fff;font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:1.1rem} .footer__col a{display:block;padding:.5rem 0;min-height:40px;font-size:.92rem;color:#9FB6CE;transition:color .2s} .footer__col a:hover{color:#fff} .footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.6rem 0;font-size:.82rem;color:#6E86A0} .footer__bottom a{color:#9FB6CE} .footer__legal{display:flex;flex-wrap:wrap;gap:1.2rem} .footer__credit{color:#6E86A0} .footer__credit a{color:var(--blue-300);font-weight:600} @media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr;gap:2rem}} @media (max-width:540px){.footer__top{grid-template-columns:1fr}.footer__bottom{flex-direction:column}} /* ---------- Reveal animations (fail-safe: content visible unless JS opts in) ---------- */ .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)} html.reveal-on .reveal{opacity:0;transform:translateY(26px)} html.reveal-on .reveal.in{opacity:1;transform:none} html.reveal-on .reveal[data-d="1"]{transition-delay:.08s} html.reveal-on .reveal[data-d="2"]{transition-delay:.16s} html.reveal-on .reveal[data-d="3"]{transition-delay:.24s} html.reveal-on .reveal[data-d="4"]{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ html.reveal-on .reveal{opacity:1!important;transform:none!important;transition:none} .btn:hover{transform:none} .strip__track,.scroll-cue .bar,.badge-ai .pulse,.bubble,.typing i,.chat__avatar{animation:none!important} .fee--feature,.fee--feature:hover{transform:none} } /* ---------- Page hero (inner pages) ---------- */ .page-hero{background:var(--grad-deep);color:#fff;position:relative;overflow:hidden;isolation:isolate} .page-hero__canvas{position:absolute;inset:0;z-index:-1;opacity:.7} .page-hero__inner{padding-block:clamp(3rem,7vw,5.5rem)} .page-hero h1{color:#fff;max-width:18ch} .page-hero .lead{color:#C6D6E8;margin-top:1rem} .breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:#9FB6CE;margin-bottom:1.4rem} .breadcrumb a:hover{color:#fff} .breadcrumb span{opacity:.5} /* Prose for inner content blocks */ .prose-block{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);margin-top:1rem} .prose-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:var(--card-pad);transition:transform .35s var(--ease),box-shadow .35s} .prose-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .prose-card h3{font-size:1.3rem;margin-bottom:.7rem;display:flex;align-items:center;gap:.7rem} .prose-card h3 .n{font-size:.85rem;color:var(--blue-ink);font-family:var(--sans);font-weight:700} .prose-card ul{display:flex;flex-direction:column;gap:.55rem;margin-top:.8rem} .prose-card li{display:flex;gap:.6rem;font-size:.94rem;color:var(--body)} .prose-card li svg{width:17px;height:17px;color:var(--blue);flex:none;margin-top:.2rem} @media (max-width:760px){.prose-block{grid-template-columns:1fr}} /* utility */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center} @media (max-width:860px){.split{grid-template-columns:1fr}} .mt-1{margin-top:1rem}.mt-2{margin-top:2rem} .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--navy);padding:.8rem 1.2rem;border-radius:0 0 10px 0;font-weight:600} .skip-link:focus{left:0}