/* ═══════════════════════════════════════════════════════════════════════════════ AXIOM — site v9 (2026-09-09 ; feuille sortie du le 2026-09-10, partagée avec animation.html). Une page de logiciel : fond papier, une couleur d'action, des titres à taille de document, des tableaux, des captures réelles. Aucun dégradé, aucune pilule, aucune police mono, aucun gris neutre (R=G=B), aucune étiquette en capitales : ce sont les marqueurs relevés sur la v8 (docs/site-v9-20260909/BRIEF.md). ═══════════════════════════════════════════════════════════════════════════════ */ :root { --paper: #F6F3EE; --paper-2: #EEEAE2; --paper-3: #E4DFD5; --ink: #1C1A17; --ink-2: #4A463F; --ink-3: #6A6559; --rule: #D6D0C5; --rule-2: #E6E1D8; --action: #1F3F6B; --action-2:#173256; --action-bg: #E6ECF4; --ok: #2F6B3A; --no: #A33A2B; --font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-sans: var(--font); --font-display: var(--font); --font-mono: var(--font); /* la feuille extraite les lit aussi hors de #approche */ --w: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: auto; } html.nav-open { overflow: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--action-2); } h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: 0; text-wrap: balance; } h1 { font-size: 36px; line-height: 1.2; } h2 { font-size: 30px; } h3 { font-size: 20px; } h4 { font-size: 17px; } p { margin: 0; text-wrap: pretty; } p + p { margin-top: 14px; } strong { font-weight: 600; } img { max-width: 100%; height: auto; display: block; } .wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; } .narrow > * { max-width: 760px; } /* colonne de lecture à 760 px, sur l’axe gauche de la page (pas centrée) */ section { padding: 72px 0; border-top: 1px solid var(--rule); } section.no-rule { border-top: 0; } section.tinted { background: var(--paper-2); border-top: 0; } section.tinted + section { border-top: 0; } .lede { font-size: 19px; color: var(--ink-2); max-width: 720px; margin-top: 14px; } .muted { color: var(--ink-3); } .small { font-size: 14px; } .sec-head { margin-bottom: 36px; } .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; align-items: start; } .step-file { margin-bottom: 44px; } .step-file > p { max-width: 760px; } .step figure img.xls { aspect-ratio: auto; object-fit: contain; display: block; } @media (max-width: 760px) { .step figure img.xls { min-width: 720px; } } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; } .skip:focus { left: 12px; top: 12px; } /* Boutons : rectangulaires, une seule action primaire par bloc */ .btn { display: inline-block; font: inherit; font-weight: 500; line-height: 1; padding: 13px 18px; border-radius: 3px; border: 1px solid var(--action); background: var(--action); color: #fff; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--action-2); border-color: var(--action-2); color: #fff; } .btn.secondary { background: transparent; color: var(--action); } .btn.secondary:hover { background: var(--action-bg); } .btn:disabled { opacity: .55; cursor: default; } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* Tableaux : filets fins, chiffres tabulaires */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 16px; } th, td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule-2); } th { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--rule); } td.num, th.num { text-align: right; white-space: nowrap; } tbody tr:last-child td { border-bottom: 1px solid var(--rule); } caption { text-align: left; caption-side: bottom; padding-top: 10px; font-size: 14px; color: var(--ink-3); } /* Figures : un cadre fin, une légende */ figure { margin: 0; } .frame { border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: #fff; } figcaption { font-size: 14px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; } /* ── Navigation ─────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); } .nav .wrap { display: flex; align-items: center; height: 62px; gap: 28px; } .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); } .brand b { font-weight: 600; font-size: 19px; } .brand span { font-size: 13px; color: var(--ink-3); } .nav-links { display: flex; gap: 22px; margin-left: 12px; } .nav-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; } .nav-links a:hover { color: var(--ink); text-decoration: underline; } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; } .lang { display: flex; gap: 2px; font-size: 14px; } .lang button { font: inherit; font-size: 14px; background: none; border: 0; color: var(--ink-3); padding: 6px 7px; cursor: pointer; border-radius: 3px; } .lang button.active { color: var(--ink); font-weight: 600; } .lang button:hover { background: var(--paper-2); } .nav-login { font-size: 15px; color: var(--ink-2); text-decoration: none; } .nav-login:hover { text-decoration: underline; } .nav .btn { padding: 10px 14px; font-size: 15px; } .nav-toggle { display: none; font: inherit; background: none; border: 1px solid var(--rule); border-radius: 3px; padding: 8px 10px; cursor: pointer; color: var(--ink); margin-left: auto; } #nav-mobile { display: none; } @media (max-width: 960px) { .nav-links, .nav-right .nav-login, .nav-right .lang { display: none; } .nav-toggle { display: inline-block; } .nav-right { margin-left: 0; } .brand span { display: none; } .nav .btn { white-space: nowrap; padding: 9px 12px; font-size: 14px; } .nav .wrap { gap: 12px; } #nav-mobile.open { display: block; position: fixed; inset: 62px 0 0 0; background: var(--paper); z-index: 49; padding: 20px 24px; overflow: auto; } #nav-mobile a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; font-size: 18px; } #nav-mobile .lang { margin-top: 18px; } #nav-mobile .lang button { font-size: 16px; padding: 8px 12px; } } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { padding: 0 0 56px; border-top: 0; } .hero-grid { margin-top: 40px; display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; } .hero p.lede { margin-top: 20px; font-size: 18px; } .hero .btn-row { margin-top: 26px; } .hero .note { margin-top: 16px; font-size: 14px; color: var(--ink-3); max-width: 520px; } .hero-visual { position: relative; aspect-ratio: 16 / 11; } /* pas de boîte : la pile est posée sur le papier, avec son ombre — à côté du titre, sous le film */ .hero-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } .hero-visual { aspect-ratio: 4 / 3; } h1 { font-size: 32px; } } /* sous 960 px : titre puis pile (le film est déjà au-dessus) */ /* Le film (12/09) : le visuel du hero, EN PREMIER sous la barre, pleine largeur (bord à bord jusqu'à 1600 px), sans titre ni légende. Les textes du film sont posés par la page (police du site, traduits) et synchronisés sur la lecture par app.js ; l'affiche est le plan final. */ .film { position: relative; margin: 0 auto; max-width: 1600px; } .film-box { position: relative; aspect-ratio: 16 / 9; background: var(--paper-3); container-type: inline-size; } .film-box video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .film-titles { position: absolute; inset: 0; pointer-events: none; } .film-label, .film-phrase { position: absolute; margin: 0; transform: translate(-50%, -50%); background: rgba(246, 243, 238, .88); color: var(--ink); border-radius: 3px; opacity: 0; transition: opacity .15s; } .film-label { white-space: nowrap; font-weight: 500; line-height: 1; padding: .55em .8em; font-size: clamp(13px, 1.5vw, 26px); font-size: clamp(13px, 2.03cqw, 26px); } .film-c1 { left: 50%; top: 25%; } .film-c2 { left: 77%; top: 30%; } .film-phrase { left: 23.5%; top: 70%; width: 37%; text-align: center; font-weight: 600; line-height: 1.3; padding: .45em .6em; text-wrap: balance; font-size: clamp(13px, 2.2vw, 38px); font-size: clamp(13px, 2.97cqw, 38px); } .film-titles .on { opacity: 1; transition: opacity .35s; } .film-toggle { position: absolute; right: 12px; top: 12px; font: inherit; font-size: 14px; line-height: 1; background: rgba(246, 243, 238, .88); color: var(--ink-2); border: 1px solid var(--rule); border-radius: 3px; padding: 8px 11px; cursor: pointer; } .film-toggle:hover { color: var(--ink); background: var(--paper); } .film-toggle:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* lu par les lecteurs d'écran, invisible : la phrase du film */ @media (max-width: 700px) { .film-phrase { left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: none; border-radius: 0; text-align: left; padding: 10px 12px; font-size: 15px; } .film-toggle { right: 8px; top: 8px; font-size: 12px; padding: 7px 9px; } } /* ── Produit : trois colonnes, chacune avec un objet réel ────────────── */ .step h3 { margin-bottom: 10px; } .step figure { margin-top: 18px; } .step figure img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; } .trio { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto auto; gap: 10px; align-items: start; } .trio img { border: 1px solid var(--rule); background: #fff; } .trio .trio-phone { grid-row: 1 / 3; aspect-ratio: 585 / 996; object-position: top; border-radius: 6px; } .trio .trio-app { aspect-ratio: 16 / 10; } .trio .trio-pdf { aspect-ratio: 1310 / 1853; object-position: top; max-height: 190px; } .trio figcaption { grid-column: 1 / -1; } /* ── Contraintes : tableau ───────────────────────────────────────────── */ #contraintes td:first-child { font-weight: 600; white-space: nowrap; } .axles { margin-top: 36px; grid-template-columns: 1fr 360px; align-items: center; } .axles figure { max-width: 360px; } @media (max-width: 760px) { .axles { grid-template-columns: 1fr; } } /* ── Bande sombre de la cinématique : le module v8 tel quel, avec ses variables ── */ #approche { --bg-0: #0B0A08; --bg-1: #14120F; --line: rgba(255,255,255,.08); --tx-0: #F3F0EA; --tx-1: #BCB5AA; --tx-3: #938B7E; --acc: #FF7A1A; --acc-2: #FFA060; --font-sans: var(--font); --font-display: var(--font); --font-mono: var(--font); background: var(--bg-0); color: var(--tx-0); border-top: 0; padding: 32px 0 0; } #approche .band-foot { max-width: var(--w); margin: 0 auto; padding: 28px 24px 56px; color: var(--tx-1); font-size: 15px; } #approche .band-foot a { color: #fff; } #approche .contraintes-grid { list-style: none; padding: 0 24px; max-width: var(--w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; } #approche.cstr6-on .contraintes-grid { display: none; } /* 3D actif : la liste n'est que le repli (la règle de la feuille extraite perdait en spécificité contre l'id) */ #approche .contrainte { padding: 16px 0; border-top: 1px solid var(--line); } #approche .contrainte-title { font-size: 17px; color: var(--tx-0); } #approche .contrainte-value { color: var(--acc-2); margin-top: 4px; } #approche .contrainte-desc { color: var(--tx-1); font-size: 15px; margin-top: 4px; } #approche .cine-nature { font-family: var(--font); font-size: 13px; letter-spacing: 0; top: auto; bottom: 3vh; left: 4vw; max-width: min(44vw, 430px); } @media (max-width: 700px) { #approche .cine-nature { top: auto; bottom: 2vh; } } #approche * { letter-spacing: 0; } #approche .cine-lead-legend { font-size: 14px; } #approche .cine-dot { width: 12px; height: 12px; } #approche .cine-loading { font-family: var(--font); letter-spacing: 0; font-size: 14px; } @media (max-width: 700px) { #approche .contraintes-grid { grid-template-columns: 1fr; } } /* ── Exemples : un plan, ses chiffres, la personne concernée ────────── */ .spec { display: grid; grid-template-columns: 7fr 5fr; gap: 36px; align-items: start; padding: 36px 0; border-top: 1px solid var(--rule-2); } .spec:first-of-type { border-top: 0; padding-top: 8px; } .spec-canvas { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-2); overflow: hidden; } .spec-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .spec-canvas .hint { position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: var(--ink-3); pointer-events: none; } .spec h3 { margin-bottom: 12px; } .spec table { font-size: 15px; } .spec td:first-child { color: var(--ink-3); width: 46%; } .spec .who { margin-top: 18px; font-size: 15px; color: var(--ink-2); } @media (max-width: 900px) { .spec { grid-template-columns: 1fr; } } /* ── Gabarits : silhouettes à l'échelle (22 px par mètre), une ligne par gabarit ─────────── */ .fleet h3 { margin: 26px 0 6px; } .fleet h3:first-child { margin-top: 0; } .fleet-list { list-style: none; margin: 0; padding: 0; } .fleet-list li { display: grid; grid-template-columns: 420px 1fr 120px 190px; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); } .fl-ico { display: block; height: auto; max-width: 100%; } .fl-pal { width: 150px; } .fleet-list.pal li { grid-template-columns: 160px 1fr 120px 190px; } .fl-name { font-weight: 500; } .fl-dim, .fl-load { text-align: right; white-space: nowrap; } .fleet .small { margin-top: 10px; } @media (max-width: 960px) { .fleet-list li, .fleet-list.pal li { grid-template-columns: 1fr; gap: 4px; } .fl-ico { width: auto; max-width: 100%; } .fl-pal { width: 110px; } .fl-dim, .fl-load { text-align: left; white-space: normal; } } /* ── Rapport ─────────────────────────────────────────────────────────── */ .pages { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 24px; margin-top: 32px; } .pages figure:first-child { grid-row: 1 / 3; } .pages img { border: 1px solid var(--rule); background: #fff; } .vehicle { margin-top: 40px; grid-template-columns: 1.7fr 1fr; align-items: center; } @media (max-width: 760px) { .pages, .cols-3, .cols-2 { grid-template-columns: 1fr; } } /* ── Tarifs ──────────────────────────────────────────────────────────── */ .cycle { display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin: 22px 0 26px; } .cycle button { font: inherit; font-size: 15px; background: var(--paper); color: var(--ink-2); border: 0; padding: 10px 16px; cursor: pointer; } .cycle button + button { border-left: 1px solid var(--rule); } .cycle button.on { background: var(--ink); color: #fff; } .price-tbl { min-width: 880px; } #gabarits table { min-width: 520px; } .price-tbl td.lbl, .price-tbl th:first-child { position: sticky; left: 0; background: var(--paper-2); } .tbl-hint { display: none; margin-bottom: 10px; } @media (max-width: 960px) { #gabarits .tbl-wrap::after { content: ''; } } @media (max-width: 960px) { .tbl-hint { display: block; } } .price-tbl th { vertical-align: bottom; } .price-tbl th.plan { width: 19%; } .price-tbl .amount { font-size: 26px; font-weight: 600; line-height: 1.1; } .price-tbl .amount small { font-size: 14px; font-weight: 400; color: var(--ink-3); } .price-tbl .annual { font-size: 13px; color: var(--ink-3); display: block; min-height: 18px; } .price-tbl .who { font-weight: 400; font-size: 14px; color: var(--ink-2); display: block; margin-top: 8px; } .price-tbl td.lbl { color: var(--ink-3); width: 24%; } .price-tbl td .btn { margin-top: 4px; } /* ── TARIFS SUR PETIT ÉCRAN : une carte par plan (construites par app.js depuis le tableau) ─── Le tableau fait 880 px de large : en dessous, il défile et devient illisible au doigt. Les cartes le remplacent. `[data-cards="1"]` n'est posé QUE si la construction a réussi — sans JS, le tableau et sa mention de défilement restent, ce qui est dégradé mais fonctionnel. */ .price-cards { display: none; } @media (max-width: 960px) { [data-cards="1"] .tbl-wrap, [data-cards="1"] .tbl-hint { display: none; } [data-cards="1"] .price-cards { display: grid; gap: 12px; margin-top: 4px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } /* Replié, une carte doit rester COURTE : mesuré, les quatre dépliées font 4,1 écrans sur un iPhone 390, et on ne compare plus rien. Repliées, elles tiennent dans un seul. */ .pcard { border: 1px solid var(--rule); background: var(--paper-2); padding: 15px 16px 14px; } .pcard-head { padding-bottom: 10px; } .pcard-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: inherit; font-size: 14px; color: var(--ink-2); text-align: left; cursor: pointer; } .pcard-more::after { content: '+'; font-size: 17px; line-height: 1; color: var(--ink-3); } .pcard-more.on::after { content: '–'; } .pcard-det { padding-top: 2px; } .pcard-head > span:first-child { font-weight: 600; font-size: 15px; } .pcard .amount { font-size: 30px; font-weight: 600; line-height: 1.1; margin-top: 2px; } .pcard .amount small { font-size: 14px; font-weight: 400; color: var(--ink-3); } .pcard .annual { font-size: 13px; color: var(--ink-3); display: block; } .pcard .who { display: block; font-size: 14px; color: var(--ink-2); margin: 2px 0 10px; } .pc-row { display: flex; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule-2); } .pc-row:last-child { border-bottom: 0; } .pcard-det[hidden] { display: none; } .pc-lbl { color: var(--ink-3); flex: 0 0 44%; } .pc-val { flex: 1 1 auto; text-align: right; } .pcard-cta { margin-top: 12px; } .pcard-cta .btn { display: block; width: 100%; text-align: center; } } .price-notes { margin-top: 30px; } .price-notes h3 { margin-bottom: 8px; } .price-notes + .price-notes { margin-top: 26px; } /* ── Les offres du module Multimodal (21/09) : même registre que les cartes de plan, hors du tableau ── `.amount` et `.annual` ne sont stylées que sous `.price-tbl` et `.pcard` : ici, leurs règles propres. */ .mm-avis { font-size: 15px; color: var(--ink-2); max-width: 760px; } .mm-offres { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .mm-offre { flex: 0 1 300px; border: 1px solid var(--rule); background: var(--paper-2); padding: 15px 16px 14px; } .mm-offre .mm-nom { display: block; font-weight: 600; font-size: 15px; } .mm-offre .amount { font-size: 26px; font-weight: 600; line-height: 1.1; margin-top: 4px; } .mm-offre .amount small { font-size: 14px; font-weight: 400; color: var(--ink-3); } .mm-offre .annual { font-size: 13px; color: var(--ink-3); display: block; min-height: 18px; } .mm-offre .btn { margin-top: 8px; } @media (max-width: 600px) { .mm-offre { flex: 1 1 100%; } .mm-offre .btn { display: block; width: 100%; text-align: center; } } /* ── Lien vers l'animation (sous le tableau des contraintes) ─────────── */ .anim-link { margin-top: 28px; max-width: 760px; } /* ── Colonnes latérales : équipe, contact ───────────────────────────── */ .side { padding-top: 6px; } .side h3 { margin-bottom: 10px; } .side p + p { margin-top: 12px; } .side-list { list-style: none; margin: 0; padding: 0; } .side-list li { padding: 9px 0; border-bottom: 1px solid var(--rule-2); } .side-list li:last-child { border-bottom: 1px solid var(--rule); } .team { grid-template-columns: 7fr 5fr; } .contact-grid { grid-template-columns: 7fr 5fr; } .contact-grid .form-grid { margin-top: 0; } @media (max-width: 900px) { .team, .contact-grid { grid-template-columns: 1fr; } } /* ── Page de l'animation ─────────────────────────────────────────────── */ .anim-head { padding: 48px 0 36px; } .anim-head h1 { margin-top: 14px; } .anim-foot { padding: 40px 0 56px; } /* ── FAQ : réponses visibles, sur deux colonnes ──────────────────────── */ .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin: 0; } .faq dt { font-weight: 600; font-size: 18px; margin-top: 26px; } .faq dd { margin: 8px 0 0; color: var(--ink-2); } @media (max-width: 900px) { .faq { grid-template-columns: 1fr; } } /* ── Contact ─────────────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 24px; } .form-grid .full { grid-column: 1 / -1; } .field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--action); outline-offset: 1px; } #contact-success { padding: 18px 20px; border: 1px solid var(--ok); border-radius: 3px; color: var(--ok); margin-top: 24px; } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } } /* ── Pied de page ────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--rule); padding: 36px 0 44px; font-size: 14px; color: var(--ink-3); } footer .links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 18px; } footer .links a { color: var(--ink-2); text-decoration: none; } footer .links a:hover { text-decoration: underline; } /* ── Bandeau cookies (js/consent.js partagé avec la production) : surcharges par id ── */ #axiom-consent-banner { background: var(--paper) !important; color: var(--ink) !important; border-top: 1px solid var(--rule) !important; box-shadow: none !important; font-family: var(--font) !important; } #axiom-consent-banner a { color: var(--action) !important; } #axiom-consent-banner strong { color: var(--ink) !important; } #axiom-consent-accept { background: var(--action) !important; color: #fff !important; border-radius: 3px !important; border: 1px solid var(--action) !important; font-family: var(--font) !important; } #axiom-consent-refuse { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: 3px !important; font-family: var(--font) !important; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } } @media (max-width: 700px) { section { padding: 48px 0; } h2 { font-size: 26px; } body { font-size: 16px; } .lede { font-size: 17px; } } /* Portrait : un tableau à trois colonnes de phrases devient une liste (sinon un mot par ligne, vu sur capture) */ @media (max-width: 700px) { #contraintes table, #contraintes tbody, #contraintes tr, #contraintes td { display: block; width: 100%; } #contraintes thead { display: none; } #contraintes tr { padding: 12px 0; border-bottom: 1px solid var(--rule-2); } #contraintes td { border: 0; padding: 2px 0; } #contraintes td:first-child { padding-top: 0; } #contraintes td:nth-child(3) { color: var(--ink-3); font-size: 15px; } #contraintes caption { display: block; } }