/* ========================================================= LAMA FIT — Feuille de style unique, alignée sur le Design System Thèmes : clair (défaut) et sombre via Langues : FR (LTR) et AR (RTL) via propriétés logiques ========================================================= */ /* ---------- Tokens communs ---------- */ :root { --blue: #114CE6; /* Bleu LAMA — primaire */ --blue-hover: #0C3DC0; --navy: #0B1F44; /* Navy — secondaire */ --success: #10B981; --error: #EF4444; --wa: #25D366; --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --h1: clamp(2.25rem, 1.4rem + 3vw, 3rem); /* 48 */ --h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); /* 36 */ --h3: 1.5rem; /* 24 */ --h4: 1.25rem; /* 20 */ --small: .875rem; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 20px; --container: 1200px; --nav-h: 72px; } :root[lang="ar"] { --font-head: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; } /* ---------- Thème clair (Design System) ---------- */ :root { color-scheme: light; --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F5F7FA; /* Gris — fonds de section */ --tint: #EBF0FF; /* Bleu clair */ --tint-fg: #114CE6; --ink: #1A1A1A; /* Texte principal */ --ink-2: #3F4654; --muted: #6B7280; /* Texte secondaire */ --line: #E4E7EC; --line-strong: #D0D5DD; --link: #114CE6; --link-hover: #0C3DC0; --field-bg: #FFFFFF; --nav-bg: rgba(255, 255, 255, .94); --cta-bg: #0B1F44; --cta-line: transparent; --footer-bg: #0B1F44; --chip-fg: #0B1F44; --strong: #0B1F44; --blade-soft: #EBF0FF; --ok-bg: #ECFDF5; --ok-line: #A7F3D0; --ok-fg: #065F46; --ko-bg: #FEF2F2; --ko-line: #FECACA; --ko-fg: #991B1B; --wa-tint: #E7F8EE; --wa-fg: #128C4B; --shadow: 0 1px 2px rgba(16, 24, 40, .05); --shadow-lg: 0 24px 48px -16px rgba(11, 31, 68, .22); } /* ---------- Thème sombre ---------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0A1633; --surface: #0F1F45; --surface-2: #0C1A3B; --tint: rgba(84, 128, 255, .16); --tint-fg: #8DAEFF; --ink: #EEF2FA; --ink-2: #C9D1E0; --muted: #9AA6BC; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .18); --link: #8DAEFF; --link-hover: #B4CAFF; --field-bg: #0B1837; --nav-bg: rgba(10, 22, 51, .9); --cta-bg: #13285C; --cta-line: rgba(255, 255, 255, .1); --footer-bg: #060E22; --chip-fg: #D6DEEE; --strong: #FFFFFF; --blade-soft: rgba(84, 128, 255, .18); --ok-bg: rgba(16, 185, 129, .12); --ok-line: rgba(16, 185, 129, .35); --ok-fg: #86EFAC; --ko-bg: rgba(239, 68, 68, .12); --ko-line: rgba(239, 68, 68, .35); --ko-fg: #FCA5A5; --wa-tint: rgba(37, 211, 102, .14); --wa-fg: #4ADE80; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .6); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } :root[lang="ar"] body { line-height: 1.75; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--ink); margin: 0; letter-spacing: -.01em; } h1 { font-size: var(--h1); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; } h2 { font-size: var(--h2); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } h3 { font-size: var(--h3); font-weight: 500; line-height: 1.3; } h4 { font-size: var(--h4); font-weight: 500; line-height: 1.35; } :root[lang="ar"] :is(h1, h2, h3, h4, h5) { letter-spacing: 0; line-height: 1.35; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; inset-inline-start: 16px; top: -48px; z-index: 200; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: var(--r); } .skip-link:focus { top: 12px; color: #fff; } [dir="rtl"] .bi-arrow-right, [dir="rtl"] .bi-arrow-left { display: inline-block; transform: scaleX(-1); } .ltr { direction: ltr; unicode-bidi: isolate; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; } .section--gray { background: var(--surface-2); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; } .section-head > div { max-width: 660px; } .section-head p { margin-top: 12px; color: var(--muted); font-size: 1.0625rem; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; font-family: var(--font-head); font-weight: 600; font-size: .9375rem; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .btn .bi { font-size: 1rem; line-height: 1; } .btn--sm { height: 38px; padding: 0 14px; font-size: .875rem; } .btn--lg { height: 52px; padding: 0 26px; font-size: 1rem; } .btn--block { width: 100%; } .btn--primary { background: var(--blue); color: #fff; } .btn--primary:hover { background: var(--blue-hover); color: #fff; } :root[data-theme="dark"] .btn--primary:hover { background: #2A62F2; } .btn--secondary { background: transparent; color: var(--link); border-color: var(--link); } .btn--secondary:hover { background: var(--tint); color: var(--link); } .btn--light { background: #fff; color: var(--navy); } .btn--light:hover { background: #EBF0FF; color: var(--navy); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn--ghost-light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(17, 76, 230, .3); } .btn:disabled { opacity: .6; cursor: not-allowed; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9375rem; font-family: var(--font-head); } /* ---------- Navigation ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background-color .25s ease; } .nav.is-scrolled { border-bottom-color: var(--line); } .nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 24px; } .nav__logo img { height: 34px; width: auto; } .logo-dark { display: none; } :root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: block; } .nav__menu { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; } .nav__menu a:not(.btn) { font-size: .9375rem; font-weight: 500; color: var(--ink); padding: 8px 12px; border-radius: var(--r-sm); } .nav__menu a:not(.btn):hover, .nav__menu a[aria-current="page"] { color: var(--link); background: var(--surface-2); } .nav__tools { display: flex; align-items: center; gap: 6px; margin-inline-start: 8px; } .nav__lang { display: inline-flex; align-items: center; gap: 6px; color: var(--muted) !important; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font-size: 1.05rem; line-height: 1; } .icon-btn:hover { background: var(--surface-2); color: var(--link); } .nav__cta { margin-inline-start: 6px; } .nav__toggle { display: none; } /* ---------- Hero ---------- */ .hero { padding: 72px 0 88px; overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; } .hero__kicker { font-family: var(--font-head); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--link); margin-bottom: 20px; } :root[lang="ar"] .hero__kicker { letter-spacing: 0; font-size: .9375rem; } .hero h1 { max-width: 16ch; } .hero h1 em { font-style: normal; color: var(--link); } :root[data-theme="dark"] .hero h1 em { color: #7FA2FF; } .hero__lead { margin-top: 24px; font-size: 1.125rem; color: var(--ink-2); max-width: 34rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 40px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); } .hero__facts div { display: flex; flex-direction: column; gap: 2px; } .hero__facts strong { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--strong); } .hero__facts span { font-size: var(--small); color: var(--muted); } .hero__visual { position: relative; padding-block: 48px; padding-inline-start: 32px; } .hero__blade { position: absolute; z-index: 0; pointer-events: none; } .hero__blade--top { width: 78%; right: -6%; top: -4px; fill: var(--blue); } .hero__blade--bottom { width: 52%; left: -4%; bottom: 0; fill: var(--blade-soft); } .frame { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .frame__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); direction: ltr; } .frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); } .frame__bar span { margin-left: 10px; font-size: .75rem; color: var(--muted); } .frame img { width: 100%; aspect-ratio: 1600 / 1008; object-fit: cover; } /* ---------- Bande atouts ---------- */ .strip { border-block: 1px solid var(--line); } .strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .strip__item { padding: 32px 28px; } .strip__item:first-child { padding-inline-start: 0; } .strip__item + .strip__item { border-inline-start: 1px solid var(--line); } .strip__item > .bi { font-size: 1.5rem; color: var(--link); } .strip__item h3 { font-size: 1rem; font-weight: 600; margin: 14px 0 6px; } .strip__item p { font-size: var(--small); color: var(--muted); } /* ---------- Cartes ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); } .icon-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--r); background: var(--tint); color: var(--tint-fg); font-size: 1.25rem; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature h3 { font-size: var(--h4); font-weight: 600; margin: 18px 0 8px; } .feature > p { font-size: var(--small); color: var(--muted); } .feature__mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-strong); } .feature__mods li { font-size: .8125rem; font-weight: 500; color: var(--chip-fg); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; } /* ---------- Pour qui ---------- */ .audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .audience { padding: 28px; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); } .audience:nth-child(3n) { border-inline-end: 0; } .audience:nth-last-child(-n+3) { border-bottom: 0; } .audience .bi { font-size: 1.35rem; color: var(--link); } .audience h3 { font-size: 1.0625rem; font-weight: 600; margin: 12px 0 6px; } .audience p { font-size: var(--small); color: var(--muted); } .cities { margin-top: 24px; display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--ink-2); } .cities .bi { color: var(--link); } /* ---------- Interface (onglets) ---------- */ .tour { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; } .tour__tabs { display: flex; flex-direction: column; gap: 4px; } .tour__tab { display: grid; grid-template-columns: 24px 1fr; gap: 2px 12px; text-align: start; width: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--r); background: transparent; cursor: pointer; color: var(--ink); transition: background-color .15s ease, border-color .15s ease; } .tour__tab .bi { grid-row: span 2; font-size: 1.15rem; color: var(--muted); padding-top: 1px; } .tour__tab strong { font-family: var(--font-head); font-weight: 600; font-size: .9375rem; } .tour__tab span { font-size: .8125rem; color: var(--muted); line-height: 1.45; } .tour__tab:hover { background: var(--surface); } .tour__tab[aria-selected="true"] { background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--blue), var(--shadow); } [dir="rtl"] .tour__tab[aria-selected="true"] { box-shadow: inset -3px 0 0 var(--blue), var(--shadow); } .tour__tab[aria-selected="true"] .bi { color: var(--link); } .tour__panel img { transition: opacity .2s ease; } /* ---------- Étapes ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } .steps::before { content: ""; position: absolute; top: 20px; inset-inline-start: 20px; inset-inline-end: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); } .step__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 700; box-shadow: 0 0 0 6px var(--bg); } .step h3 { font-size: 1.0625rem; font-weight: 600; margin: 20px 0 6px; } .step p { font-size: var(--small); color: var(--muted); max-width: 26ch; } /* ---------- Packs ---------- */ .packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .pack { display: flex; flex-direction: column; position: relative; padding: 32px; } .pack--featured { border: 2px solid var(--blue); box-shadow: var(--shadow-lg); } .pack__badge { position: absolute; top: -13px; inset-inline-start: 32px; background: var(--blue); color: #fff; font-size: .75rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; font-family: var(--font-head); } .pack__name { font-size: 1.0625rem; font-weight: 600; color: var(--strong); } .pack__for { font-size: var(--small); color: var(--muted); margin-top: 4px; } .pack__price { display: flex; align-items: baseline; gap: 6px; margin: 24px 0 2px; } .pack__price strong { font-family: var(--font-head); font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1; } .pack__price span { font-family: var(--font-head); font-weight: 600; color: var(--muted); } .pack__note { font-size: .8125rem; color: var(--muted); } .pack__list { margin: 24px 0 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; flex: 1; align-content: start; } .pack__list li { display: flex; gap: 10px; font-size: .9375rem; } .pack__list .bi { color: var(--link); font-size: 1rem; margin-top: 3px; } .pack__list .pack__inherit { font-weight: 600; color: var(--strong); } .guarantees { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 36px; padding: 18px 24px; border-radius: var(--r-lg); background: var(--tint); color: var(--strong); font-size: .9375rem; font-weight: 500; } .guarantees li { display: inline-flex; align-items: center; gap: 8px; } .guarantees .bi { color: var(--success); } /* ---------- Avantages ---------- */ .advantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; } .adv { display: grid; grid-template-columns: 44px 1fr; gap: 16px; } .adv h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 4px; } .adv p { font-size: .9375rem; color: var(--muted); } /* ---------- FAQ ---------- */ .faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; } .faq__intro { position: sticky; top: calc(var(--nav-h) + 32px); } .faq__intro p { margin-top: 12px; color: var(--muted); } .faq__intro .link-arrow { margin-top: 20px; } .faq__list { border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary .bi { flex: none; font-size: 1.1rem; color: var(--link); transition: transform .2s ease; } .faq__item[open] summary .bi { transform: rotate(45deg); } .faq__item summary:hover { color: var(--link); } .faq__item p { padding-inline-end: 40px; padding-bottom: 22px; color: var(--ink-2); } /* ---------- CTA ---------- */ .section--cta { padding-bottom: 0; } .cta { position: relative; overflow: hidden; background: var(--cta-bg); border: 1px solid var(--cta-line); color: #fff; border-radius: var(--r-xl); padding: 56px; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; } .cta h2 { color: #fff; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); } .cta p { margin-top: 12px; color: rgba(255,255,255,.78); max-width: 46ch; } .cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; position: relative; z-index: 1; } .cta__art { position: absolute; top: 50%; transform: translateY(-50%); width: 34%; max-width: 460px; pointer-events: none; right: 5%; } [dir="rtl"] .cta__art { right: auto; left: 5%; } .cta__art path:first-child { fill: var(--blue); } .cta__art path:last-child { fill: #3D6EF0; opacity: .55; } /* ---------- Contact & formulaires ---------- */ .contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; } .contact__intro p { margin-top: 12px; color: var(--muted); } .contact__list { margin-top: 32px; display: grid; gap: 4px; } .contact__list a { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 12px; margin: 0 -12px; border-radius: var(--r); color: var(--ink); } .contact__list a:hover { background: var(--surface-2); color: var(--ink); } .contact__list small { display: block; font-size: .8125rem; color: var(--muted); } .contact__list b { font-weight: 600; font-family: var(--font-head); } .icon-tile--wa { background: var(--wa-tint); color: var(--wa-fg); } .contact__place { display: flex; gap: 8px; align-items: center; margin-top: 24px; font-size: var(--small); color: var(--muted); } .form-card { padding: 36px; } .form-card h3 { font-size: var(--h4); font-weight: 600; margin-bottom: 24px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field--full { grid-column: 1 / -1; } .field label { font-size: var(--small); font-weight: 500; color: var(--ink); } .field label abbr { color: var(--error); text-decoration: none; margin-inline-start: 2px; } .field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--field-bg); font-size: .9375rem; transition: border-color .15s ease, box-shadow .15s ease; } .field input[type="tel"], .field input[type="email"] { direction: ltr; text-align: start; } [dir="rtl"] .field input[type="tel"], [dir="rtl"] .field input[type="email"] { text-align: right; } .field textarea { min-height: 112px; resize: vertical; } .field select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239AA6BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } [dir="rtl"] .field select { background-position: left 14px center; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .75; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(17, 76, 230, .18); } .field .is-invalid { border-color: var(--error); } .field .is-invalid:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, .18); } .form-hp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; } .form-legal { font-size: .8125rem; color: var(--muted); margin-top: 12px; } .lf-form-msg:empty { display: none; } .lf-form-msg { margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); font-size: var(--small); border: 1px solid; } .lf-form-msg .bi { font-size: 1.1rem; line-height: 1.3; } .lf-form-msg.success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); } .lf-form-msg.success .bi { color: var(--success); } .lf-form-msg.error { background: var(--ko-bg); border-color: var(--ko-line); color: var(--ko-fg); } .lf-form-msg.error .bi { color: var(--error); } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Modale ---------- */ .modal { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); color: var(--ink); background: var(--surface); } .modal::backdrop { background: rgba(6, 14, 34, .6); } .modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 0; } .modal__head h2 { font-size: var(--h4); font-weight: 600; } .modal__body { padding: 20px 28px 28px; } .modal[open] { animation: modal-in .2s ease-out; } @keyframes modal-in { from { opacity: 0; transform: translateY(8px); } } /* ---------- Pages légales ---------- */ .page-hero { background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 56px 0 48px; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--small); color: var(--muted); margin-bottom: 20px; } .breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; color: var(--line-strong); } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--link); } .page-hero p { margin-top: 14px; font-size: 1.0625rem; color: var(--ink-2); max-width: 60ch; } .page-hero .page-date { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: var(--small); color: var(--muted); } .legal { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; padding-block: 64px 96px; } .legal__toc { font-size: var(--small); } .prose { max-width: 72ch; color: var(--ink-2); } .prose h2 { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 40px 0 12px; scroll-margin-top: calc(var(--nav-h) + 24px); } .prose h2:first-child { margin-top: 0; } .prose p { margin: 0 0 14px; } .prose ul { margin: 0 0 16px; display: grid; gap: 8px; } .prose ul li { position: relative; padding-inline-start: 20px; } .prose ul li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--link); } .prose strong { color: var(--ink); font-weight: 600; } .aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 16px; } .aside .card { padding: 24px; } .aside h2 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; } .aside p { font-size: var(--small); color: var(--muted); margin-bottom: 14px; } .aside ul { display: grid; gap: 10px; font-size: var(--small); margin-bottom: 18px; } .aside ul a { display: flex; gap: 10px; align-items: center; color: var(--ink); } .aside ul a:hover { color: var(--link); } .aside ul .bi { color: var(--link); } .toc a { color: var(--muted); display: block; padding: 2px 0; } .toc a:hover { color: var(--link); } .toc ol { display: grid; gap: 4px; font-size: var(--small); } /* 404 */ .notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 96px 0; } .notfound p { margin: 16px auto 28px; color: var(--muted); max-width: 44ch; } .notfound .hero__actions { justify-content: center; } /* ---------- Footer ---------- */ .footer { background: var(--footer-bg); color: rgba(255,255,255,.72); padding: 72px 0 0; font-size: var(--small); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; } .footer__logo { height: 34px; width: auto; } .footer__about p { margin-top: 18px; max-width: 32ch; } .footer h2 { color: #fff; font-size: .9375rem; font-weight: 600; margin-bottom: 16px; } .footer ul { display: grid; gap: 10px; } .footer a { color: rgba(255,255,255,.72); } .footer a:hover { color: #fff; } .footer__contact a, .footer__contact li { display: flex; gap: 10px; align-items: flex-start; } .footer__contact .bi { color: #8FB0FF; margin-top: 2px; } .footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .8125rem; } .footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; } .wa-float { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--wa); color: #fff; font-size: 1.6rem; box-shadow: 0 10px 24px -6px rgba(0,0,0,.35); } .wa-float:hover { color: #fff; background: #1EBE5A; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } .hero__visual { max-width: 760px; } .features, .audiences { grid-template-columns: repeat(2, 1fr); } .audience:nth-child(3n) { border-inline-end: 1px solid var(--line); } .audience:nth-child(2n) { border-inline-end: 0; } .audience:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .audience:nth-last-child(-n+2) { border-bottom: 0; } .tour { grid-template-columns: 1fr; gap: 24px; } .tour__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; } .tour__tab { width: auto; flex: none; grid-template-columns: 20px auto; } .tour__tab span { display: none; } .tour__tab .bi { grid-row: auto; } .tour__tab[aria-selected="true"], [dir="rtl"] .tour__tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--blue), var(--shadow); } .footer__grid { grid-template-columns: 1fr 1fr; } .legal { grid-template-columns: 1fr; gap: 40px; } .aside { position: static; grid-template-columns: 1fr 1fr; } } @media (max-width: 960px) { .nav__inner { gap: 12px; } .nav__toggle { display: inline-flex; } .nav__tools { margin-inline-start: auto; } .nav__menu { position: absolute; left: 0; right: 0; top: var(--nav-h); flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 24px 20px; box-shadow: 0 16px 24px -12px rgba(0,0,0,.25); display: none; margin: 0; } .nav__menu.is-open { display: flex; } .nav__menu a:not(.btn) { padding: 12px; } .nav__cta { margin: 8px 0 0; height: 44px; } .strip__grid { grid-template-columns: repeat(2, 1fr); } .strip__item:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .strip__item:nth-child(n+3) { border-top: 1px solid var(--line); } .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } .steps::before { display: none; } .packs { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .advantages { grid-template-columns: repeat(2, 1fr); } .faq, .contact { grid-template-columns: 1fr; gap: 40px; } .faq__intro { position: static; } .cta { grid-template-columns: 1fr; padding: 40px 32px; } .cta__art { width: 60%; right: -18%; opacity: .45; } [dir="rtl"] .cta__art { left: -18%; } } @media (max-width: 640px) { .section { padding: 72px 0; } .container { padding: 0 20px; } .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; } .hero { padding: 48px 0 64px; } .hero__actions .btn { flex: 1 1 100%; } .hero__visual { padding-block: 28px; padding-inline-start: 12px; } .hero__facts { gap: 12px 24px; } .hero__facts strong { font-size: 1.25rem; } .strip__grid, .features, .advantages, .steps, .audiences { grid-template-columns: 1fr; } .audience, .audience:nth-child(n) { border-inline-end: 0; border-bottom: 1px solid var(--line); } .audience:last-child { border-bottom: 0; } .strip__item, .strip__item:nth-child(n) { padding: 24px 0; border-inline-start: 0; } .strip__item + .strip__item { border-top: 1px solid var(--line); } .form-grid { grid-template-columns: 1fr; } .form-card { padding: 24px; } .footer__grid, .aside { grid-template-columns: 1fr; } .cta__art { display: none; } .modal__head { padding: 20px 20px 0; } .modal__body { padding: 16px 20px 20px; } .nav__cta-desktop { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* CTA de navigation : un dans la barre (desktop), un dans le menu (mobile) */ .nav__menu .nav__cta { display: none; } @media (max-width: 960px) { .nav__menu .nav__cta { display: inline-flex; } .nav__tools .nav__cta { display: none; } } .faq__q { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; } .icon-btn.lang-btn { width: auto; padding: 0 12px; font-family: var(--font-head); font-weight: 600; font-size: .875rem; color: var(--muted); } .icon-btn.lang-btn:lang(ar) { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: .9375rem; }