/* cours-permis-conduire.ch - design system tokens & base styles (CDC §24, §59) */
/*
* Self-hosted Karla/Martel (CDC §43 - no remote Google Fonts request at
* runtime). The woff2 files are subsetted to the Latin + French/German
* accented characters this site actually uses (see README "Polices").
* Regenerate them the same way if a new character shows up in content
* that isn't covered (Œ/Æ ligatures already included; Cyrillic or Greek
* are not).
*/
@font-face {
font-family: 'Karla';
src: url('/assets/fonts/karla-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Karla';
src: url('/assets/fonts/karla-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Martel';
src: url('/assets/fonts/martel-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--color-background: #FAF9F7;
--color-surface: #FFFFFF;
--color-text: #2B2B2C;
--color-text-muted: #5B5D63;
--color-border: #E4E1DC;
--color-primary: #B23A3A;
--color-primary-contrast: #FFFFFF;
--color-info: #33475B;
--color-focus: #1E4E8C;
--color-surface-translucent: rgba(255, 255, 255, 0.9);
--color-success-text: #256029;
--color-success-bg: #E7F5EA;
--color-success-border: #BFE3C8;
--color-error-text: #7A2E2E;
--color-error-bg: #FBEAEA;
--color-error-border: #EFC6C6;
--color-pending-text: #6B5A2E;
--color-pending-bg: #FBF3E0;
--color-pending-border: #EBDBAF;
--color-regulatory-bg: #EEF2F5;
--color-regulatory-border: #D7E0E6;
--color-surface-tint: #F5F0E9;
/* Fixed, theme-independent: the vehicle illustrations (assets/images/
illustrations/*.svg) are flat anthracite/blue artwork with no dark
variant, so their backdrop chip stays light in both themes - the
same trade-off as a logo mark that doesn't get an inverted twin. */
--color-illustration-bg: #F2ECE3;
--font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-heading: 'Martel', Georgia, 'Times New Roman', serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--space-2xl: 5.5rem;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--width-content: 760px;
--width-wide: 1280px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-background: #1B1B1D;
--color-surface: #232326;
--color-text: #ECEAE6;
--color-text-muted: #B7B4AE;
--color-border: #3A3A3D;
--color-primary: #D9756F;
--color-info: #7C93AC;
--color-focus: #7CA6E0;
--color-surface-translucent: rgba(35, 35, 38, 0.88);
--color-success-text: #A9DDB4;
--color-success-bg: #1E3323;
--color-success-border: #2F4E37;
--color-error-text: #E8ABAB;
--color-error-bg: #3A2323;
--color-error-border: #55302F;
--color-pending-text: #E4CE8E;
--color-pending-bg: #362E19;
--color-pending-border: #52441F;
--color-regulatory-bg: #202932;
--color-regulatory-border: #34424D;
--color-surface-tint: #232019;
}
}
:root[data-theme="dark"] {
--color-background: #1B1B1D;
--color-surface: #232326;
--color-text: #ECEAE6;
--color-text-muted: #B7B4AE;
--color-border: #3A3A3D;
--color-primary: #D9756F;
--color-info: #7C93AC;
--color-focus: #7CA6E0;
--color-surface-translucent: rgba(35, 35, 38, 0.88);
--color-success-text: #A9DDB4;
--color-success-bg: #1E3323;
--color-success-border: #2F4E37;
--color-error-text: #E8ABAB;
--color-error-bg: #3A2323;
--color-error-border: #55302F;
--color-pending-text: #E4CE8E;
--color-pending-bg: #362E19;
--color-pending-border: #52441F;
--color-regulatory-bg: #202932;
--color-regulatory-border: #34424D;
--color-surface-tint: #232019;
}
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
}
h1, h2, h3 {
font-family: var(--font-heading);
line-height: 1.25;
color: var(--color-text);
}
h1 { font-size: clamp(2.1rem, 1.75rem + 2.2vw, 3.2rem); letter-spacing: -0.01em; margin: 0 0 var(--space-sm); }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin: var(--space-lg) 0 var(--space-sm); }
h3 { font-size: 1.2rem; margin: var(--space-md) 0 var(--space-xs); }
h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: var(--space-sm) 0 var(--space-xs); }
.text-small {
font-size: 0.9rem;
color: var(--color-text-muted);
}
a {
color: var(--color-info);
}
a:hover {
text-decoration-thickness: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--color-surface);
color: var(--color-text);
padding: var(--space-xs) var(--space-sm);
z-index: 100;
border-radius: var(--radius-sm);
}
.skip-link:focus {
left: var(--space-sm);
top: var(--space-sm);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
/* Shared navigation: desktop mega-menu, mobile accordions. */
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.site-header__inner{position:relative;max-width:var(--width-wide);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.site-logo{flex-shrink:0}.site-logo img{display:block;height:42px;width:auto}
.primary-nav{margin-left:auto}.primary-nav__sections{display:flex;align-items:center;gap:30px;list-style:none;padding:0;margin:0}
.primary-nav__details>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 0;cursor:pointer;list-style:none;color:var(--color-text);font:400 16px/1.3 var(--font-body);text-decoration:none;border:0}
.primary-nav__details>summary::-webkit-details-marker{display:none}.primary-nav__details>summary::marker{content:''}
.primary-nav__details>summary.is-active{font-weight:700;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
.nav-chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .18s}
.primary-nav__details[open]>summary .nav-chevron{transform:rotate(225deg);margin-top:3px}.primary-nav__details[open]>summary{color:var(--color-info)}
.primary-nav__panel{position:absolute;top:100%;left:24px;right:24px;margin-top:10px;max-height:calc(100dvh - 106px);overflow:auto;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);box-shadow:0 18px 45px -24px rgba(25,34,43,.35);animation:menu-enter .16s ease-out}
.mega-main{display:grid;grid-template-columns:235px minmax(0,1fr) 250px;gap:30px;padding:30px;min-height:390px}
.mega-sidebar{padding-right:8px}.mega-eyebrow{font:700 11px/1.5 var(--font-body);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.12em;margin:0 0 20px}
.mega-tabs{display:none}.nav-enhanced .mega-tabs{display:grid;gap:9px}
.mega-tab{display:flex;align-items:start;gap:11px;width:100%;padding:16px 13px;background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;text-align:left;color:var(--color-text);font:400 14px/1.45 var(--font-body)}
.mega-tab__number{font-size:10px;color:var(--color-text-muted);margin-top:4px}.mega-tab strong{display:block;font-weight:700}.mega-tab__hint{display:block;margin-top:5px;color:var(--color-text-muted);font-size:12px;line-height:1.45}.mega-tab__arrow{margin-left:auto;opacity:0;flex-shrink:0}
.mega-tab[aria-selected="true"]{background:var(--color-surface-tint);border-color:var(--color-border)}.mega-tab[aria-selected="true"] .mega-tab__arrow{opacity:1;color:var(--color-info)}.mega-tab:hover{background:var(--color-surface-tint)}
.mega-sidebar__note{font:400 12px/1.6 var(--font-body);color:var(--color-text-muted);margin:27px 13px 0;max-width:170px}
.mega-actions{display:grid;gap:4px;margin:12px 13px 0}.mega-actions a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;color:var(--color-text);font:700 14px/1.45 var(--font-body);text-decoration:none}.mega-actions a:hover{color:var(--color-info)}.mega-actions--mobile{display:none}
.mega-content{min-width:0;padding:0 0 0 2px}.mega-group+.mega-group{margin-top:28px}.mega-group__title{font:700 11px/1.5 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 17px}
.nav-enhanced .mega-group:not(.is-selected){display:none}.nav-enhanced .mega-group+.mega-group{margin-top:0}
.mega-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px;list-style:none;margin:0;padding:0;max-height:none;overflow:visible}
.mega-links a{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:39px;padding:9px 0;border-bottom:1px solid var(--color-border);text-decoration:none;color:var(--color-text);font:400 14px/1.45 var(--font-body)}
.mega-links a>span:first-child{overflow-wrap:anywhere}.mega-links a>span:last-child{font-size:12px;color:var(--color-text-muted);opacity:.45;flex-shrink:0}.mega-links a:hover{color:var(--color-primary)}.mega-links a:hover>span:last-child{opacity:1;color:var(--color-primary)}
.mega-promo{border-left:1px solid var(--color-border);padding-left:26px;align-self:start}.mega-promo__art{position:relative;background:var(--color-illustration-bg);border-radius:7px;overflow:hidden;margin-bottom:18px}.mega-promo__art img{display:block;width:100%;height:auto;aspect-ratio:1.55;object-fit:cover;transform:scale(1.1)}.mega-promo__art>span{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:27px;height:32px;border:2px solid #faf9f7;background:#33475b;color:#faf9f7;font:700 22px/1 var(--font-body);transform:rotate(7deg)}
.mega-promo__title{font:700 21px/1.4 var(--font-heading);letter-spacing:-.025em;color:var(--color-text);margin:0 0 10px}.mega-promo__text{font:400 12px/1.6 var(--font-body);color:var(--color-text-muted);margin:0 0 17px}.mega-promo__caption{display:block;margin-top:10px;color:var(--color-text-muted);font:400 10px/1.5 var(--font-body)}
.primary-nav__quiz{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;min-height:44px;padding:12px 16px;border:1px solid var(--color-text);border-radius:6px;background:var(--color-text);color:var(--color-surface);font:700 14px/1.3 var(--font-body);text-decoration:none;white-space:nowrap}
.primary-nav__quiz:hover{background:var(--color-info);border-color:var(--color-info);color:var(--color-surface)}.primary-nav__quiz[aria-current="page"]{background:var(--color-info);border-color:var(--color-info);color:var(--color-surface)}.mega-promo .primary-nav__quiz{font-size:16px;min-height:52px;margin-top:10px;white-space:normal;width:100%;gap:8px}
.mega-footer{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:15px 30px;background:var(--color-surface-tint);border-top:1px solid var(--color-border)}.mega-footer>span,.mobile-menu-languages>span{font:400 12px/1.4 var(--font-body);color:var(--color-text-muted)}
.language-switcher{display:flex;gap:5px;list-style:none;margin:0;padding:0}.language-switcher a,.language-switcher__pending{display:block;padding:6px 10px;color:var(--color-text-muted);font:700 12px/1.4 var(--font-body);text-decoration:none;border:1px solid transparent;border-radius:4px}.language-switcher a:hover{border-color:var(--color-border)}.language-switcher a.is-active{color:var(--color-text);background:var(--color-surface);border-color:var(--color-border);text-decoration:underline;text-underline-offset:3px}
.language-switcher__pending{position:relative;color:var(--color-text-muted);cursor:help}.language-switcher__tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:0;padding:8px 12px;border-radius:4px;background:var(--color-text);color:var(--color-surface);white-space:nowrap;font-weight:400;z-index:1}.language-switcher__pending:hover .language-switcher__tooltip,.language-switcher__pending:focus .language-switcher__tooltip{display:block}.language-switcher__pending:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.nav-toggle,.mobile-menu-footer{display:none}.nav-backdrop{position:fixed;inset:0;z-index:30;background:rgba(34,43,54,.16)}.nav-backdrop[hidden]{display:none}
.site-header :is(a,button,summary):focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
@keyframes menu-enter{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1001px) and (max-width:1150px){.primary-nav__sections{gap:20px}.primary-nav__details>summary{font-size:14px}.primary-nav__quiz-item .primary-nav__quiz{font-size:12px}.mega-main{grid-template-columns:210px minmax(0,1fr) 220px;gap:22px;padding:24px}.mega-links{gap:2px 15px}.mega-promo{padding-left:20px}}
@media(min-width:1001px) and (max-height:700px){.mega-main{padding:20px;min-height:0}.mega-links a{min-height:32px;padding:5px 0}.mega-promo__art img{aspect-ratio:1.9}.mega-sidebar__note{margin-top:15px}}
@media(max-width:1000px){
.site-header__inner{padding:12px 20px;min-height:70px;gap:20px}.site-logo img{height:38px}
.nav-toggle{display:none;align-items:center;gap:13px;min-height:44px;padding:8px 4px;border:0;background:none;color:var(--color-text);cursor:pointer;font:700 14px/1 var(--font-body)}.nav-enhanced .nav-toggle{display:flex}.nav-toggle__icon{display:grid;gap:6px;width:22px}.nav-toggle__icon span{height:2px;background:currentColor;transition:transform .18s}.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child{transform:translateY(4px) rotate(45deg)}.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child{transform:translateY(-4px) rotate(-45deg)}
.primary-nav{position:absolute;top:100%;left:0;right:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);margin:0;padding:0;display:flex;flex-direction:column;max-height:calc(100dvh - 70px);overflow:auto}
.nav-enhanced .primary-nav{display:none;height:calc(100dvh - 70px);overflow:hidden}.nav-enhanced .primary-nav.is-open{display:flex}
.primary-nav__sections{display:block;margin:0;padding:12px 22px 24px;overflow:auto;min-height:0;flex:1}.primary-nav__item{border-bottom:1px solid var(--color-border)}
.primary-nav__details>summary{font-size:20px;min-height:66px;justify-content:space-between;padding:18px 0}.primary-nav__details>summary.is-active{text-underline-offset:5px}.nav-chevron{width:8px;height:8px;margin-right:5px}
.primary-nav__panel{position:static;margin:0;max-height:none;overflow:visible;box-shadow:none;border:0;border-radius:0;animation:none;background:transparent}
.mega-main{display:block;min-height:0;padding:5px 0 25px}.mega-sidebar,.mega-promo,.mega-footer{display:none}.mega-content{padding:0}
.nav-enhanced .mega-group:not(.is-selected){display:block}.mega-group+.mega-group,.nav-enhanced .mega-group+.mega-group{margin-top:25px}
.mega-group__title{font-size:10px;letter-spacing:.08em;margin-bottom:8px}.mega-links{display:block;max-height:none;overflow:visible}.mega-links a{min-height:44px;padding:10px 2px;font-size:15px;border-bottom:0}.mega-links a>span:last-child{padding-right:5px}
.mega-actions--mobile{display:grid;margin:0 0 20px}.mega-actions--mobile a{min-height:44px;border-bottom:1px solid var(--color-border)}
.primary-nav__quiz-item{display:none}.mobile-menu-footer{display:block;flex-shrink:0;border-top:1px solid var(--color-border);background:var(--color-surface-tint);padding:12px 22px max(16px,env(safe-area-inset-bottom))}
.mobile-menu-languages{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-bottom:12px}.language-switcher a,.language-switcher__pending{min-height:36px;display:grid;place-items:center;min-width:38px}
.mobile-test{display:flex;align-items:center;gap:14px}.mobile-test>img{width:76px;height:68px;object-fit:contain;border-radius:5px;background:var(--color-illustration-bg)}.mobile-test>div{min-width:0;flex:1}.mobile-test>div>span{display:block;margin-bottom:6px;font:400 10px/1.4 var(--font-body);color:var(--color-text-muted)}.mobile-test .primary-nav__quiz{width:100%;font-size:16px;min-height:52px;white-space:normal;padding:10px 13px}
.site-header:not(.nav-enhanced){position:relative}
.site-header:not(.nav-enhanced) .site-header__inner{flex-wrap:wrap}
.site-header:not(.nav-enhanced) .primary-nav{position:static;width:100%;max-height:none}
body.nav-is-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.primary-nav__panel{animation:none}.nav-chevron,.nav-toggle__icon span{transition:none}}
/* Breadcrumb */
.breadcrumb {
max-width: var(--width-wide);
margin: 0 auto;
padding: var(--space-sm) var(--space-md) 0;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb li:not(:last-child)::after {
content: '/';
margin-left: 0.4em;
color: var(--color-border);
}
.breadcrumb a {
color: var(--color-text-muted);
text-decoration: none;
}
/* Main content */
.page {
max-width: var(--width-content);
margin: 0 auto;
padding: var(--space-lg) var(--space-md) var(--space-xl);
}
/* The homepage carries its own full-bleed sections (hero, alternating
tinted bands) instead of the single narrow column every other page
uses, so it opts out of .page's own width/padding here. */
.page--home {
max-width: none;
padding: 0;
}
.section {
padding: var(--space-xl) var(--space-md);
}
.section--tint {
background: var(--color-surface-tint);
}
.section__inner {
max-width: var(--width-wide);
margin: 0 auto;
}
.section__inner--narrow {
max-width: var(--width-content);
margin: 0 auto;
}
.page__intro {
font-size: 1.15rem;
color: var(--color-text-muted);
}
.page__hero-photo {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-sm);
background: var(--color-border);
margin: var(--space-sm) 0 0;
}
/* Category-detail header (CDC-compliant replacement for the Pexels hero
photo, 2026-09): the illustration sits top-right, the H1 (and intro, if
short enough) wraps around it like a printed page, dropping full-width
once the text runs past the image's height - classic CSS float, not
grid/flex. Requires the illustration to be the FIRST child in the
template, before : floats only affect in-flow content that follows
them in source order, so a wrapper div around the heading would defeat
this (it would either sit beside the float as a whole box or ignore it
entirely, never wrap line-by-line the way a bare / does).
Unfloated (stacked, centred, image above text) below 640px - the same
width a real book page has isn't there yet on a phone, and wrapping
two or three words per line around a corner image is not "like a book",
it is just broken. */
.detail-hero {
margin: var(--space-sm) 0 var(--space-lg);
}
/* Selector deliberately scoped to .detail-hero (not a bare
.page__hero-illustration rule): it needs to outrank .vehicle-picker
__illustration's own `width: 100%` at equal specificity, which otherwise
wins on source order since that rule is declared later in this file. */
.detail-hero .page__hero-illustration {
display: block;
width: 100%;
max-width: 325px;
margin: 0 auto var(--space-sm);
}
@media (min-width: 640px) {
.detail-hero {
display: flow-root;
}
.detail-hero .page__hero-illustration {
float: right;
width: 275px;
max-width: none;
margin: 0 0 var(--space-sm) var(--space-md);
}
}
/* The real editorial photo within the body (CDC-compliant replacement for
the hero photo above). Fixed at the photos' own native 3:2 ratio -
deliberately not 16:9 like .page__hero-photo above.
Uses the classic fluid-ratio-box technique (padding-top percentage on the
wrapping , img absolutely positioned to fill it) instead of the
CSS `aspect-ratio` property: it does not depend on that property's
browser/webview support at all, which a plain `aspect-ratio` box could
silently fall back past into an unconstrained, source-ratio-only box. */
.category-photo--content {
position: relative;
display: block;
width: 100%;
padding-top: 66.667%;
margin: var(--space-lg) 0;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-border);
}
.category-photo--content .page__content-photo {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
}
.category-photo__credit {
margin: 0.4em 0 0;
color: var(--color-text-muted);
}
/* Hero (homepage only) - CDC §25: not full-viewport height, the answer to
"what is this / what do I do" must already be visible on load. */
.hero {
padding: var(--space-lg) var(--space-md) var(--space-xl);
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-lg);
align-items: center;
}
.hero__copy {
min-width: 0;
max-width: 42em;
}
.hero__illustration {
display: block;
width: 100%;
max-width: 320px;
height: auto;
margin: 0 auto;
}
.hero__actions {
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-top: var(--space-md);
}
.hero__actions .btn {
width: 100%;
}
@media (min-width: 720px) {
.hero__actions {
flex-direction: row;
}
.hero__actions .btn {
width: auto;
}
}
@media (min-width: 900px) {
.hero__inner {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-xl);
}
.hero__illustration {
max-width: 100%;
}
}
/* Vehicle picker (CDC §6, §25) - illustrated category quick-picks. A
horizontal scroll-snap row on mobile (fits more than one card without
the page feeling like a wall of stacked cards), a wrapping grid from
tablet width up. */
.vehicle-picker {
display: flex;
gap: var(--space-sm);
list-style: none;
margin: var(--space-md) 0 0;
padding: 0 0 var(--space-xs);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.vehicle-picker__item {
flex: 0 0 auto;
scroll-snap-align: start;
width: 132px;
}
.vehicle-picker__link {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
font-weight: 600;
text-align: center;
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.vehicle-picker__link:hover {
border-color: var(--color-info);
transform: translateY(-2px);
box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.3);
}
.vehicle-picker__illustration {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 8 / 5;
background: var(--color-illustration-bg);
border-radius: var(--radius-md);
}
.vehicle-picker__illustration img {
width: 80%;
height: 80%;
object-fit: contain;
}
/* Raster variant (assets/images/illustrations/*.png|webp) - that artwork
already bakes in its own rounded card and background, so it does not
need the flat-icon chip's own background above. A fixed 3:2 box (rather
than each file's own trimmed aspect, which varies slightly per source
export - 1.31 to 1.65 seen so far) keeps every card in a row the same
height; object-fit:cover crops a little of the artwork's own cream
margin, never the vehicle itself, at the ratios seen so far (see
DESIGN.md → Illustrations before changing this if a new asset looks
over-cropped). */
.vehicle-picker__illustration--raster {
aspect-ratio: 3 / 2;
background: none;
border-radius: var(--radius-md);
overflow: hidden;
}
.vehicle-picker__illustration--raster img,
.vehicle-picker__illustration--raster picture {
display: block;
width: 100%;
height: 100%;
}
.vehicle-picker__illustration--raster img {
object-fit: cover;
}
.vehicle-picker__label {
font-size: 0.95rem;
}
@media (min-width: 640px) {
.vehicle-picker {
flex-wrap: wrap;
overflow-x: visible;
}
.vehicle-picker__item {
width: 150px;
}
}
/* Grid layout (CDC-requested 3-column /permis/ overview, 2026-09) - a fixed
column count rather than the scroll-snap row above, used where the full
category set is shown at once instead of a short curated pick. */
.vehicle-picker--grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
overflow: visible;
scroll-snap-type: none;
}
.vehicle-picker--grid .vehicle-picker__item {
width: auto;
}
@media (min-width: 640px) {
.vehicle-picker--grid {
grid-template-columns: repeat(3, 1fr);
}
}
ul, ol {
padding-left: 1.3em;
}
/* Numbered steps (e.g. /obtenir-permis/): a real visual stepper instead of
a plain numbered list. Scoped to so it never touches the
breadcrumb's own , which lives outside . */
main ol {
list-style: none;
counter-reset: step;
padding-left: 0;
margin: var(--space-md) 0;
}
main ol > li {
counter-increment: step;
position: relative;
padding: 0.35rem 0 var(--space-md) 3rem;
border-left: 2px solid var(--color-border);
margin-left: 1.1rem;
}
main ol > li::before {
content: counter(step);
position: absolute;
left: -1.35rem;
top: 0;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-primary-contrast);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 700;
}
main ol > li:last-child {
border-left-color: transparent;
padding-bottom: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: var(--space-md) 0;
font-size: 0.95rem;
}
caption {
text-align: left;
font-weight: 600;
margin-bottom: var(--space-xs);
}
th, td {
text-align: left;
padding: 0.6em 0.8em;
border-bottom: 1px solid var(--color-border);
}
th {
font-family: var(--font-heading);
font-weight: 700;
}
/* Buttons - one shared component, never a one-off style per placement */
.btn {
display: inline-block;
padding: 0.6em 1.3em;
border-radius: var(--radius-sm);
font: inherit;
font-weight: 600;
text-decoration: none;
text-align: center;
border: 1px solid transparent;
cursor: pointer;
}
.btn--primary {
background: var(--color-primary);
color: var(--color-primary-contrast);
}
.btn--secondary {
background: transparent;
color: var(--color-text);
border-color: var(--color-border);
}
.btn--secondary:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Alerts - shared feedback/status component (form results, pending data) */
.alert {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-sm);
margin: var(--space-sm) 0;
}
.alert--success {
color: var(--color-success-text);
background: var(--color-success-bg);
border-color: var(--color-success-border);
}
.alert--error {
color: var(--color-error-text);
background: var(--color-error-bg);
border-color: var(--color-error-border);
}
.alert--pending {
color: var(--color-pending-text);
background: var(--color-pending-bg);
border-color: var(--color-pending-border);
}
/* Regulatory callout box - wraps content that states a legal/regulatory
fact, so it reads visually distinct from ordinary editorial prose. */
.regulatory-box {
border: 1px solid var(--color-regulatory-border);
border-radius: var(--radius-md);
background: var(--color-regulatory-bg);
padding: var(--space-md);
margin: var(--space-md) 0;
}
.regulatory-box__label {
display: block;
font-family: var(--font-heading);
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-info);
margin: 0 0 var(--space-sm);
}
.regulatory-box dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.4em 1em;
margin: 0;
}
.regulatory-box dt {
font-weight: 600;
color: var(--color-text-muted);
}
.regulatory-box dd {
margin: 0;
}
/* Card grid - reused wherever a set of cards needs to wrap responsively */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-md);
}
/* Schools directory canton filter (2026-09-14) - plain GET form, works
with no JS (the is a pure enhancement via onchange submit). */
.schools-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
margin: var(--space-md) 0 var(--space-lg);
}
.schools-filter label {
font-weight: 700;
}
.schools-filter select {
font: inherit;
padding: 0.5em 0.75em;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
}
/* Age selector - "Quel permis puis-je passer à mon âge ?" (CDC §6, §12).
Native panels work with no JS; app.js turns the row of
elements into a segmented-control tab row with a sliding
indicator, and crossfades between panels. All animation is pure
presentation - no eligibility rule is ever computed in CSS/JS. */
.age-selector {
position: relative;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
background:
radial-gradient(ellipse 480px 240px at 100% 0%, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent),
var(--color-surface);
padding: var(--space-lg) var(--space-md);
margin: 0;
}
.age-selector h2 {
margin-top: 0;
}
.age-selector__tabs {
display: none;
position: relative;
gap: 2px;
margin-bottom: var(--space-lg);
padding: 4px;
border-radius: 18px;
background: var(--color-background);
border: 1px solid var(--color-border);
width: 100%;
max-width: 100%;
flex-wrap: wrap;
}
.age-selector.js-enhanced .age-selector__tabs {
display: flex;
}
.age-selector__indicator {
position: absolute;
top: 0;
left: 0;
border-radius: 999px;
background: var(--color-primary);
transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
z-index: 0;
}
.age-selector__tab {
position: relative;
z-index: 1;
font: inherit;
font-weight: 700;
font-size: 1rem;
flex: 1 0 76px;
min-height: 44px;
padding: 0.55em 0.65em;
border: none;
border-radius: 999px;
background: transparent;
color: var(--color-text);
cursor: pointer;
transition: color 0.25s ease;
white-space: nowrap;
}
.age-selector__tab[aria-pressed="true"] {
color: var(--color-primary-contrast);
}
.age-selector__panels {
display: grid;
}
.age-selector__panel {
border-top: 1px solid var(--color-border);
padding: var(--space-sm) 0;
}
.age-selector__panel:first-of-type {
border-top: none;
}
.age-selector.js-enhanced .age-selector__panel {
grid-area: 1 / 1;
border: none;
padding: 0;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.age-selector.js-enhanced .age-selector__panel[data-active] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.age-selector.js-enhanced .age-selector__panel summary {
display: none;
}
.age-selector__panel summary {
cursor: pointer;
font-weight: 700;
font-size: 1.15rem;
padding: 0.4em 0;
}
.age-selector__panel-inner {
position: relative;
}
/* Permalink (2026-09-15): a real , not just the panel's
id - clicking it is a normal same-page navigation (updates the address
bar, works with browser back/forward, right-click → "copy link
address"), unlike the summary/tab click which only ever toggled local
state. Kept outside on purpose: nesting an inside a
is invalid HTML (summary is already an implicit control). */
.age-selector__permalink {
position: absolute;
top: 0;
right: 0;
color: var(--color-text-muted);
font-size: 0.85rem;
text-decoration: none;
padding: 0.2em 0.4em;
border-radius: var(--radius-sm);
}
.age-selector__permalink:hover,
.age-selector__permalink:focus-visible {
color: var(--color-primary);
background: var(--color-surface-tint);
}
.age-selector__bignum {
display: none;
}
.age-selector.js-enhanced .age-selector__bignum {
display: block;
position: absolute;
top: -2.4rem;
right: -0.2rem;
font-family: var(--font-heading);
font-size: 6rem;
line-height: 1;
font-weight: 700;
color: var(--color-text);
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
.age-selector__cards {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-sm);
list-style: none;
margin: var(--space-sm) 0 0;
padding: 0;
}
.age-selector.js-enhanced .age-selector__panel[data-active] .age-selector__cards > li {
animation: age-card-in 0.35s ease backwards;
animation-delay: calc(var(--card-index, 0) * 0.05s);
}
.age-selector__cards a {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
font-weight: 600;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.age-selector__cards a:hover {
border-color: var(--color-primary);
transform: translateY(-3px);
box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.25);
}
.age-selector__card .category-photo {
display: block;
aspect-ratio: 4 / 3;
background: var(--color-border);
}
.age-selector__card-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.age-selector__card-label {
display: block;
padding: var(--space-sm);
}
.age-selector__disclaimer {
position: relative;
z-index: 1;
margin-top: var(--space-md);
margin-bottom: 0;
}
@keyframes age-card-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.age-selector__indicator,
.age-selector.js-enhanced .age-selector__panel,
.age-selector__cards a {
transition: none;
}
.age-selector.js-enhanced .age-selector__panel[data-active] .age-selector__cards > li {
animation: none;
}
}
/* Cards */
.partner-card,
.contact-partner-card,
.school-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
padding: var(--space-md);
margin: var(--space-md) 0;
}
.partner-card__badge {
display: inline-block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: 999px;
padding: 2px 10px;
margin: 0 0 var(--space-xs);
}
.partner-card__logo {
display: block;
height: 40px;
width: auto;
max-width: 100%;
border-radius: 0;
margin-bottom: var(--space-sm);
}
.partner-card__cta,
.contact-partner-card__cta {
margin-top: var(--space-xs);
}
/* Directory: quiet two-column listings and editorial partner placements. */
.page--schools-hub { max-width: 1120px; }
.schools-finder { margin: 36px 0 24px; padding: 28px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-tint); }
.schools-finder > label { display: block; margin-bottom: 14px; font: 700 clamp(1.2rem, 2vw, 1.6rem)/1.4 var(--font-heading); }
.schools-finder__field { display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 7px; }
.schools-finder__field:focus-within { border-color: var(--color-info); outline: 2px solid color-mix(in srgb, var(--color-info) 15%, transparent); }
.schools-finder__field > svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-info); }
.schools-finder input { min-width: 0; width: 100%; padding: 12px 0; border: 0; background: transparent; color: var(--color-text); font: 400 18px/1.4 var(--font-body); }
.schools-finder input:focus-visible { outline: 0; }
.schools-finder button { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border: 0; border-radius: 5px; background: var(--color-text); color: var(--color-surface); cursor: pointer; }
.schools-finder button:hover { background: var(--color-info); }
.schools-finder button svg { width: 22px; height: 22px; }
.schools-finder__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--color-text-muted); font-size: 13px; }
.schools-finder__meta strong { color: var(--color-text); }
.schools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.school-card { min-width: 0; display: flex; flex-direction: column; margin: 0; padding: 23px 25px 18px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); transition: border-color .18s; }
.school-card[hidden] { display: none; }
.school-card:hover { border-color: var(--color-info); }
.school-card__identity { display: flex; align-items: center; gap: 26px; }
.school-card__heading { min-width: 0; flex: 1; }
.school-card__title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.school-card__name { margin: 0; color: var(--color-text); font: 700 20px/1.4 var(--font-heading); letter-spacing: -.02em; overflow-wrap: anywhere; }
.school-card__location { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 14px; color: var(--color-text-muted); }
.school-card__location svg { width: 15px; height: 15px; flex-shrink: 0; }
.school-card__rating { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; gap: 5px; margin: 0; font-size: 13px; font-weight: 700; color: var(--color-text); }
.school-card__rating svg { width: 14px; height: 14px; flex-shrink: 0; color: #D9A441; }
.school-card__rating-count { font-weight: 400; color: var(--color-text-muted); }
.school-card__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: auto; padding-top: 16px; }
.school-card__contacts, .school-card__services { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.school-card__contacts { margin-left: auto; }
.school-card__contacts a, .school-card__services li { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 5px; color: var(--color-info); }
.school-card__contacts a { background: var(--color-surface-tint); border: 1px solid var(--color-border); }
.school-card__contacts a:hover { background: var(--color-info); color: var(--color-surface); }
.school-card__contacts svg, .school-card__services svg { width: 21px; height: 21px; }
.school-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 38px; padding: 28px; background: var(--color-surface-tint); }
.school-card__badge { display: inline-block; margin: 0 0 9px; font: 700 10px/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); }
.school-card--featured .school-card__name { font-size: 24px; }
.school-card__logo { display: grid; place-items: center; flex: 0 0 120px; min-height: 100px; padding: 16px; background: #fff; border-radius: 6px; }
.school-card__logo img { display: block; width: 100%; height: 68px; object-fit: contain; }
.school-card__description { align-self: center; margin: 0; font: 400 15px/1.75 var(--font-body); color: var(--color-text); }
.school-card--featured .school-card__footer { grid-column: 1 / -1; padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--color-border); }
.school-card--featured .school-card__contacts a { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
.school-card--featured .school-card__contacts a:hover { background: var(--color-info); }
.school-tooltip__text { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: none; width: max-content; max-width: 180px; padding: 7px 10px; background: var(--color-text); color: var(--color-surface); border-radius: 4px; font: 400 12px/1.4 var(--font-body); text-align: center; pointer-events: none; z-index: 2; }
.school-tooltip:hover .school-tooltip__text, .school-tooltip:focus .school-tooltip__text { display: block; }
.school-tooltip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.schools-empty { padding: 26px; border: 1px dashed var(--color-border); border-radius: 7px; }
.schools-editorial { margin-top: 48px; }
.schools-back { margin: 0 0 24px; font-size: 14px; }
@media(max-width: 760px) {
.school-card--featured { display: flex; gap: 18px; padding: 24px; }
.school-card--featured .school-card__footer { margin-top: 0; }
.school-card__identity { gap: 18px; }
.school-card__logo { flex-basis: 90px; padding: 10px; }
}
@media(max-width: 600px) {
.schools-grid { grid-template-columns: minmax(0, 1fr); }
.schools-finder { padding: 20px 16px; margin-top: 25px; }
.schools-finder__field { gap: 10px; padding-left: 12px; }
.schools-finder input { font-size: 16px; }
.schools-finder__meta { flex-direction: column; gap: 5px; }
.school-card { padding: 20px; }
.school-card--featured .school-card__name { font-size: 21px; }
.school-card--featured .school-card__identity { align-items: start; }
.school-card__logo { flex-basis: 70px; min-height: 75px; }
.school-card__logo img { height: 50px; }
.school-card__services { gap: 2px; }
.school-card__services li { width: 38px; }
.school-tooltip__text { left: 0; transform: none; max-width: 150px; }
.school-card__contacts .school-tooltip__text { left: auto; right: 0; }
}
/* Source list / last verified */
.source-list {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.last-verified {
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* Forms */
.partner-form {
display: grid;
gap: var(--space-sm);
max-width: 480px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.3em;
}
.form-field label {
font-weight: 600;
font-size: 0.95rem;
}
.form-field input,
.form-field textarea {
font: inherit;
padding: 0.6em 0.8em;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
}
.form-field__required {
color: var(--color-primary);
}
.form-field__error {
display: none;
color: var(--color-primary);
font-size: 0.85rem;
}
.form-field--error input,
.form-field--error textarea {
border-color: var(--color-primary);
}
.form-field--error .form-field__error {
display: block;
}
.form-required-note {
color: var(--color-text-muted);
font-size: 0.85rem;
margin: 0 0 var(--space-xs);
}
.partner-form .btn {
justify-self: start;
border: none;
cursor: pointer;
}
.honeypot {
position: absolute;
left: -9999px;
}
/* FAQ */
.faq__item {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-xs) var(--space-sm);
margin-bottom: var(--space-xs);
}
.faq__item summary {
cursor: pointer;
font-weight: 600;
}
/* Pagination */
.pagination ul {
display: flex;
gap: var(--space-xs);
list-style: none;
padding: 0;
}
/* Footer */
.site-footer {
border-top: 1px solid var(--color-border);
background: var(--color-surface);
margin-top: var(--space-xl);
}
.site-footer__inner {
max-width: var(--width-wide);
margin: 0 auto;
padding: var(--space-lg) var(--space-md);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.site-footer__inner ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
padding: 0;
margin: 0;
}
.site-footer__inner a {
color: var(--color-text);
text-decoration: none;
}
.site-footer__copyright {
color: var(--color-text-muted);
font-size: 0.85rem;
margin: 0;
white-space: nowrap;
}
@media (max-width: 600px) {
.site-footer__inner {
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* Addition/correction form: two distinct requests, one optional partnership. */
.request-jump { margin: 10px 0 24px; }
.request-section { scroll-margin-top: 110px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.request-section .partner-form { max-width: none; }
.request-types { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.request-types legend { margin-bottom: 12px; font-weight: 700; }
.request-types label { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--color-border); border-radius: 7px; cursor: pointer; background: var(--color-surface); }
.request-types label:has(:checked) { border-color: var(--color-info); background: var(--color-surface-tint); }
.request-types > .form-field__error { grid-column: 1 / -1; }
.request-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.request-field--wide { grid-column: 1 / -1; }
.request-fields [hidden] { display: none; }
.request-fields small { color: var(--color-text-muted); font-size: 13px; }
.request-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.request-check input, .request-types input { flex: 0 0 auto; width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--color-info); }
.request-partnership { padding: 22px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface-tint); }
.request-partnership label { font-weight: 700; }
.request-partnership p { margin: 10px 0 0 31px; font-size: 14px; }
@media(max-width: 600px) { .request-types, .request-fields { grid-template-columns: 1fr; } .request-partnership { padding: 16px; } }
.request-section .form-field__error:not(:empty) { display: block; }
.request-fields input, .request-fields textarea { min-width: 0; width: 100%; }
.request-no-guarantee { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 14px; }
.request-no-guarantee p { margin: 0 0 10px; }
.request-no-guarantee p:last-child { margin-bottom: 0; }
/* Home: three reader intentions, no commercial placements. */
.home-intentions__inner { max-width: 1200px; margin: auto; }
.home-drive, .home-age, .home-test { padding: clamp(36px, 5vw, 72px) 24px; }
.home-drive { padding-top: 42px; }
.home-eyebrow { color: var(--color-text-muted); font: 700 11px/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 15px; }
.home-drive h1 { max-width: 800px; margin-bottom: 40px; font-size: clamp(2.2rem, 4vw, 3.6rem); }
.home-intention-heading { display: flex; gap: 20px; align-items: start; }
.home-section-number { color: var(--color-text-muted); font: 700 11px/1.5 var(--font-body); flex-shrink: 0; padding-top: 10px; }
.home-intention-heading h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.35; letter-spacing: -.025em; }
.home-intention-heading p { color: var(--color-text-muted); max-width: 640px; margin: 0 0 20px; }
.home-vehicles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 12px 0 25px; padding: 0; list-style: none; }
.home-vehicles a { display: block; text-decoration: none; color: var(--color-text); }
.home-vehicles img { display: block; width: 100%; height: auto; aspect-ratio: 1.25; object-fit: cover; border-radius: 8px; transition: transform .18s; }
.home-vehicles a:hover img { transform: translateY(-4px); }
.home-vehicles a > span { display: flex; justify-content: space-between; gap: 8px; padding: 13px 0; font-weight: 700; font-size: 15px; }
.home-vehicles a > span > span { color: var(--color-text-muted); }
.home-text-link { display: inline-flex; align-items: center; gap: 16px; color: var(--color-text); font-weight: 700; text-underline-offset: 5px; }
.home-age { background: var(--color-surface-tint); border-block: 1px solid var(--color-border); }
.home-age__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 65px; }
.home-ages { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; }
.home-ages a { position: relative; display: flex; flex-direction: column; padding: 18px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; text-decoration: none; }
.home-ages a:hover { border-color: var(--color-info); color: var(--color-info); }
.home-ages strong { font: 700 32px/1.3 var(--font-heading); }
.home-ages a > span { font-size: 13px; }
.home-ages a > span:last-child { position: absolute; right: 12px; bottom: 14px; }
.home-test__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; }
.home-test__details { font-size: 13px; }
.home-test__art { position: relative; max-width: 380px; justify-self: center; overflow: hidden; border-radius: 9px; }
.home-test__art img { display: block; width: 100%; height: auto; }
.home-test__art > span { position: absolute; top: 18px; right: 22px; background: #33475b; border: 3px solid #faf9f7; color: #faf9f7; padding: 5px 12px; font: 700 40px/1 var(--font-body); transform: rotate(7deg); }
/* Missing route: photo-led recovery with four concrete starting points. */
.page--not-found { max-width: 1200px; }
.lost-hero { position: relative; border-radius: 10px; overflow: hidden; background: #d9c8ad; }
.lost-hero__photo { display: block; width: 100%; height: 440px; object-fit: cover; object-position: center 55%; }
.lost-hero__copy { position: absolute; top: 38px; left: 38px; max-width: 450px; padding: 27px; background: var(--color-surface); border-radius: 7px; }
.lost-hero h1 { font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.2; }
.lost-hero__copy > p:last-child { margin: 16px 0 0; color: var(--color-text-muted); }
.lost-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 30px 0; }
.lost-route { display: flex; gap: 16px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.lost-route h2 { font-size: 20px; margin: 0 0 9px; }
.lost-route p { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.lost-route__arrow { margin-left: auto; flex-shrink: 0; color: var(--color-info); }
.lost-route:hover h2 { text-decoration: underline; text-underline-offset: 5px; }
.lost-route--quiz h2 { color: var(--color-primary); }
@media(max-width: 900px) {
.home-vehicles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-age__inner { gap: 30px; grid-template-columns: 1fr; }
.home-test__inner { gap: 30px; }
}
@media(max-width: 600px) {
.home-drive h1 { margin-bottom: 30px; }
.home-vehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-intention-heading { gap: 12px; }
.home-ages { gap: 8px; }
.home-ages a { padding: 14px 10px; }
.home-ages strong { font-size: 26px; }
.home-test__inner { grid-template-columns: 1fr; }
.home-test__art { max-width: 260px; }
.lost-hero { display: flex; flex-direction: column; }
.lost-hero__photo { height: 240px; object-position: 75% center; }
.lost-hero__copy { position: static; padding: 24px; border-radius: 0; }
.lost-routes { grid-template-columns: 1fr; gap: 0; }
}
@media(prefers-reduced-motion: reduce) { .home-vehicles img { transition: none; } }