/* ───────────────────────────────────────────────────────────────────────────── public/css/ai-academy.css AI MuseumWeek Academy — public/ai-academy.html. Comportement : /js/ai-academy.js. ── D'OÙ VIENT CE DESSIN ────────────────────────────────────────────────── La structure (hero typographique traversé d'un fil, six étapes dépliables, quatre profondeurs de format, diagnostic en six questions) reprend la page du partenaire qui assure la formation — The AI Adoption Path, par Dar Blockchain & Talent AI Labs. La PALETTE et la TYPOGRAPHIE, elles, sont celles du site : papier #F4F3EF, Fraunces en titrage, orange de marque. Reprendre aussi leur blanc/rouge/Inter aurait posé une page étrangère au milieu du site ; ne rien reprendre aurait effacé un curriculum qui a sa propre identité. D'où ce partage : leur charpente, notre voix. ── L'ORANGE, ET LE PIÈGE DE CONTRASTE ──────────────────────────────────── Même règle que nav-c4c.css, qui la documente en détail : #D25D38 ne passe pas les 4,5:1 sur le papier. Il ne sert donc QU'AUX FONDS, BORDURES ET FILETS (seuil 3:1, franchi). Tout TEXTE en orange passe par `var(--accent-text)`, que nav-c4c.css bascule déjà entre les deux thèmes. Une seule exception assumée : le texte blanc SUR un aplat #D25D38. ── THÈME SOMBRE ────────────────────────────────────────────────────────── Aucune règle `html.dark` ici, et c'est voulu : toutes les couleurs de ce fichier sont des variables (`--paper`, `--paper-2`, `--ink*`, `--rule`, `--accent-text`) que nav-c4c.css redéfinit déjà sous `html.dark`. Le jour où une couleur est écrite en dur ailleurs qu'en fond orange, elle casse le sombre en silence — c'est le seul piège de ce fichier. ───────────────────────────────────────────────────────────────────────── */ .aia { --aia-fill: #D25D38; } .aia section { position: relative; } /* Les barres 1 et 2 sont collantes : une ancre qui n'en tient pas compte dépose sa cible SOUS la navigation. nav-c4c.js mesure les hauteurs réelles et pose --nav1-h / --nav2-h ; les replis servent au premier rendu. */ .aia [id] { scroll-margin-top: calc(var(--nav1-h, 90px) + var(--nav2-h, 43px) + 16px); } .aia-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; } @media (max-width: 640px) { .aia-wrap { padding: 0 22px; } } /* ── Aides typographiques ────────────────────────────────────────────────── */ .aia-kick { font-family: var(--f-mono, var(--f-body)); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--accent-text); } .aia h2 { margin: 16px 0 0; font-family: var(--f-display); font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; font-weight: 400; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; } .aia h2 em { font-style: italic; color: var(--accent-text); } .aia-lede { margin: 20px 0 0; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.7; color: var(--ink-2); max-width: 62ch; } /* ── `js-on`, et pourquoi deux comportements en dépendent ────────────────── Posée sur par le script d'amorçage, AVANT le premier rendu. Tout ce qui cache du contenu en attendant un geste passe par elle : sans JS, rien ne viendrait le rouvrir, et la page perdrait la moitié de son texte au lieu de se dégrader proprement. Vaut aussi quand le script existe mais ne charge pas. Deux usages : les révélations au défilement (ici) et le repli des six étapes (plus bas). */ .js-on .aia-rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); } .js-on .aia-rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-on .aia-rv { opacity: 1; transform: none; transition: none; } } /* Chiffres fantômes : décor pur, jamais lus (aria-hidden dans le HTML). */ .aia-ghost { position: absolute; z-index: 0; pointer-events: none; user-select: none; font-family: var(--f-display); font-weight: 400; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px var(--rule); opacity: .55; } /* ── Boutons ─────────────────────────────────────────────────────────────── */ .aia-btn { display: inline-block; text-decoration: none; cursor: pointer; font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 13px 24px; border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .aia-btn-solid { background: var(--aia-fill); color: #fff; } .aia-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(210, 93, 56, .28); } .aia-btn-line { background: none; color: var(--ink); border-color: var(--ink); } .aia-btn-line:hover { transform: translateY(-2px); background: var(--paper-2); } .aia-btn:focus-visible { outline: 2px solid var(--aia-fill); outline-offset: 3px; } /* ══ HERO ═══════════════════════════════════════════════════════════════════ Pas le `hero-sec` partagé : celui-ci est un bandeau de rubrique compact, à illustration. Ici la page EST l'offre, le hero porte la promesse, les deux appels et la colonne vertébrale du curriculum. Le bandeau partagé n'aurait rien pu en faire. */ .aia-hero { /* `position: relative` n'est PAS décoratif. La règle `.aia section` plus haut ne l'attrape pas — le hero est un
. Sans bloc conteneur, les chiffres fantômes et le fil SVG, tous en `position: absolute`, se calent sur le document : `right: -10px` déborde alors la PAGE de 10 px, et le `overflow: hidden` ci-dessous ne les découpe pas, puisqu'il ne découpe que ce qui se positionne par rapport à lui. Résultat mesuré sur mobile avant correction : scrollWidth 385 pour 375 de large, soit un défilement horizontal parasite sur toute la page. */ position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(900px, calc(100svh - var(--nav1-h, 90px) - var(--nav2-h, 43px))); padding: 64px 0 0; overflow: hidden; background: var(--paper-2); border-bottom: 2px solid var(--rule); } .aia-hero .aia-wrap { position: relative; z-index: 5; } .aia-hero-g1 { top: 40px; right: -10px; font-size: min(26vw, 320px); } .aia-hero-g2 { top: 300px; right: 280px; font-size: min(26vw, 320px); opacity: .3; } @media (max-width: 900px) { .aia-hero-g2 { display: none; } } /* Le fil : une seule ligne qui traverse le hero, tracée au chargement puis prolongée au défilement (cf. /js/ai-academy.js). C'est la métaphore de la page — un chemin —, pas une décoration de plus. */ .aia-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; } /* En colonne étroite, `slice` agrandit le tracé de 1440×900 au point qu'il traverse le chapô. Un décor qui gêne la lecture ne se règle pas en opacité : il s'enlève. Le hero garde son chiffre fantôme, qui suffit. */ @media (max-width: 640px) { .aia-thread { display: none; } } .aia-thread path { fill: none; stroke: var(--aia-fill); stroke-width: 2; stroke-linecap: round; opacity: .75; } .aia-thread circle { fill: var(--aia-fill); } .aia-hero-eyebrow { font-family: var(--f-mono, var(--f-body)); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--accent-text); margin: 0; } .aia-hero h1 { margin: 20px 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(42px, 7.4vw, 92px); line-height: .98; letter-spacing: -.03em; color: var(--ink); max-width: 18ch; } .aia-hero h1 em { font-style: italic; color: var(--accent-text); } .aia-hero-tag { margin: 22px 0 0; font-family: var(--f-mono, var(--f-body)); font-size: 13px; letter-spacing: .02em; color: var(--ink); } .aia-hero-tag b { font-weight: 600; background: var(--ink); color: var(--paper); padding: 2px 8px; } .aia-hero-sub { margin: 16px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.75; color: var(--ink-2); } .aia-ctarow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .aia-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 26px 0 0; padding: 0; list-style: none; font-family: var(--f-mono, var(--f-body)); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); } /* Le socle : les six étapes, posées dès le hero. On sait à quoi on s'engage avant d'avoir défilé une seule fois. */ .aia-ground { margin-top: 48px; border-top: 2px solid var(--ink); position: relative; z-index: 5; } .aia-gsteps { display: grid; grid-template-columns: repeat(6, 1fr); } .aia-gsteps li { list-style: none; padding: 14px 0 20px 14px; border-left: 1px solid var(--rule); } .aia-gsteps li:first-child { border-left: none; padding-left: 0; } .aia-gsteps i { display: block; font-style: normal; font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .1em; color: var(--accent-text); } .aia-gsteps b { display: block; margin-top: 4px; font-family: var(--f-display); font-size: 15px; font-weight: 400; letter-spacing: -.01em; color: var(--ink); } @media (max-width: 900px) { .aia-gsteps { grid-template-columns: repeat(3, 1fr); row-gap: 4px; } .aia-gsteps li:nth-child(4) { border-left: none; padding-left: 0; } } @media (max-width: 520px) { .aia-gsteps b { font-size: 13px; } } /* ══ SECTIONS COURANTES ═════════════════════════════════════════════════════ */ .aia-sec { padding: 80px 0; border-bottom: 1px solid var(--rule); overflow: hidden; } .aia-sec-alt { background: var(--paper-2); } @media (max-width: 767px) { .aia-sec { padding: 56px 0; } } /* ── Ce que dit le secteur : les bandes de chiffres ─────────────────────── Les seuls chiffres que cette page ait le droit d'afficher viennent d'enquêtes publiées : la nôtre (180 professionnels, 2025) et l'enquête mondiale UNESCO-ICOM (403 musées, 2026), en deux bandes au même dessin. Ni les inscriptions MuseumWeek ni les abonnés Substack n'ont à y figurer : ce sont des données de membres, collectées pour autre chose. Règle détaillée dans AI_ACADEMY.md §II. */ .aia-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; border-top: 2px solid var(--ink); } .aia-facts > div { padding: 24px 20px 22px; border-left: 1px solid var(--rule); } .aia-facts > div:first-child { border-left: none; padding-left: 0; } .aia-facts b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; letter-spacing: -.02em; color: var(--accent-text); } .aia-facts span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } /* `--ink-3` et non `--ink-4` (2026-09-18) : #8C8C8C sur le papier ne donnait que 3:1 environ, et cette note porte la base et les réserves de chaque enquête — elle doit se lire. */ .aia-facts-note { margin: 22px 0 0; font-family: var(--f-mono, var(--f-body)); font-size: 10px; letter-spacing: .06em; line-height: 17px; color: var(--ink-3); } .aia-facts-note a { color: var(--accent-text); } @media (max-width: 900px) { .aia-facts { grid-template-columns: 1fr 1fr; } .aia-facts > div:nth-child(3) { border-left: none; padding-left: 0; } } @media (max-width: 480px) { .aia-facts { grid-template-columns: 1fr; } .aia-facts > div { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); } .aia-facts > div:first-child { border-top: none; } } /* Seconde bande (UNESCO-ICOM) : même dessin, un cran plus bas dans la hiérarchie — un h3 sous le h2 de la section. Notre enquête ouvre la section, celle des institutions la confirme. */ .aia-state-b { margin-top: 88px; } .aia-h3 { margin: 12px 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; } .aia-h3 em { font-style: italic; color: var(--accent-text); } @media (max-width: 640px) { .aia-state-b { margin-top: 64px; } } /* Couverture du rapport, cliquable : juste à droite du texte en large, sous le texte en étroit. L'image fait 600 px pour rester nette en haute densité. Colonne de texte bornée et centrage vertical : la première version poussait la couverture au bord droit et alignait le texte en bas, ce qui laissait un grand vide au-dessus du titre et un autre entre le texte et l'image. */ .aia-state-head { display: grid; grid-template-columns: minmax(0, 700px) 140px; justify-content: start; gap: 56px; align-items: center; } .aia-report { margin: 0; } .aia-report a { display: block; text-decoration: none; } .aia-report img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); box-shadow: 0 10px 26px rgba(26, 26, 26, .12); transition: transform .25s ease; } .aia-report a:hover img { transform: translateY(-4px); } .aia-report a:focus-visible { outline: 2px solid var(--aia-fill); outline-offset: 4px; } .aia-report a span { display: block; margin-top: 12px; font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); } .aia-report figcaption { margin-top: 4px; font-size: 10px; line-height: 1.45; color: var(--ink-3); white-space: nowrap; } @media (max-width: 720px) { .aia-state-head { grid-template-columns: 1fr; gap: 24px; } .aia-report { width: 140px; } } /* ── Pourquoi : trois cartes ─────────────────────────────────────────────── */ .aia-why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; } .aia-why-cards > div { background: var(--paper-2); border: 1px solid var(--rule); padding: 26px 24px; } .aia-sec-alt .aia-why-cards > div { background: var(--paper); } .aia-why-cards i { font-style: normal; font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .1em; color: var(--accent-text); } .aia-why-cards b { display: block; margin-top: 10px; font-family: var(--f-display); font-size: 19px; font-weight: 400; letter-spacing: -.01em; color: var(--ink); } .aia-why-cards p { margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-3); } @media (max-width: 900px) { .aia-why-cards { grid-template-columns: 1fr; } } /* ── Les six étapes ──────────────────────────────────────────────────────── */ .aia-steprail { position: relative; margin-top: 56px; } .aia-walk { position: absolute; left: -4%; top: -6%; width: 108%; height: 112%; z-index: 0; pointer-events: none; overflow: visible; opacity: .5; } .aia-walk .base { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; } .aia-walk .draw { fill: none; stroke: var(--aia-fill); stroke-width: 2.5; stroke-linecap: round; opacity: .6; } .aia-walk .pt { fill: var(--rule); } .aia-stepgrid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } .aia-step { text-align: left; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; } .aia-step-head { display: flex; align-items: baseline; gap: 12px; } .aia-step-num { font-family: var(--f-display); font-size: 54px; line-height: 1; font-weight: 400; color: transparent; -webkit-text-stroke: 1.2px var(--rule); transition: color .3s ease, -webkit-text-stroke-color .3s ease; } .aia-step[aria-expanded="true"] .aia-step-num, .aia-step:hover .aia-step-num { color: var(--accent-text); -webkit-text-stroke-color: var(--accent-text); } .aia-step-name { font-family: var(--f-mono, var(--f-body)); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .aia-step-q { margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); } /* Déplié par défaut, replié SEULEMENT si le script tourne — cf. `js-on` plus haut. Sans lui, il n'existe aucun bouton capable de rouvrir ces panneaux : les rendre repliés d'office cacherait les deux lectures de chaque étape, c'est-à-dire le fond de la section. */ .aia-step-read { margin-top: 10px; overflow: hidden; transition: max-height .45s ease, opacity .45s ease; } .js-on .aia-step-read { max-height: 0; opacity: 0; } /* 760 px et non plus 300 depuis l'ajout d'un exemple par étape (2026-09-18). Mesuré en français : jusqu'à 523 px en trois colonnes juste au-dessus de 920 px, où chaque colonne ne fait que 260 px — plus étroite que sur mobile. Marge de 30 % pour les langues plus longues (allemand) quand la page sera traduite. */ .js-on .aia-step[aria-expanded="true"] + .aia-step-read, .js-on .aia-step-read.open { max-height: 760px; opacity: 1; } /* `align-items: flex-start` n'est pas cosmétique : par défaut un enfant de flex s'étire sur toute la hauteur de la ligne. L'étiquette « Décision », qui est un aplat noir, devenait un bloc de quatre lignes de haut dès que le texte à côté passait à la ligne — visible sur mobile, où tout enroule. */ .aia-step-read > div { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-3); } .aia-step-read .rl { flex: none; transform: translateY(2px); font-family: var(--f-mono, var(--f-body)); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; color: #fff; } /* Texte en `--paper` et non en blanc : `--ink` s'éclaircit en thème sombre, et « Décision » s'y écrivait blanc sur presque blanc (contraste 1,1:1, relevé le 2026-09-18). Les deux variables s'inversent ensemble. */ .aia-step-read .rl-d { background: var(--ink); color: var(--paper); } .aia-step-read .rl-e { background: var(--aia-fill); } /* Troisième lecture : un exemple déclaré par un musée dans l'enquête UNESCO-ICOM 2026. Étiquette au trait, pas en aplat : ce n'est ni une décision ni une exécution du curriculum, c'est un témoin extérieur. */ .aia-step-read .rl-x { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule); } .aia-step-read b { font-weight: 600; color: var(--ink-2); } .aia-step-hint { margin-top: 44px; font-family: var(--f-mono, var(--f-body)); font-size: 11px; letter-spacing: .06em; color: var(--ink-4); } @media (max-width: 920px) { .aia-stepgrid { grid-template-columns: 1fr; gap: 32px; } .aia-walk { display: none; } .aia-stepcell { border-left: 2px solid var(--rule); padding-left: 18px; } .aia-stepcell:has(.aia-step[aria-expanded="true"]) { border-left-color: var(--aia-fill); } /* Le repli s'anime sur `max-height`, qui doit donc majorer la hauteur réelle. En colonne étroite les deux lectures enroulent sur huit à dix lignes et dépassaient les 300 px du dessin large : la fin du texte était coupée sans que rien ne le signale. Avec les exemples (2026-09-18) : 545 px mesurés à 320 px de large, d'où 900 px, marge de traduction comprise. */ .js-on .aia-step-read.open, .js-on .aia-step[aria-expanded="true"] + .aia-step-read { max-height: 900px; } } /* Le bandeau « niveaux d'usage + compétences » (.aia-band, .aia-modes, .aia-comps) a été retiré le 2026-09-14 avec sa section : son contenu est passé en texte dans la FAQ. */ /* ── Formules et prix : le principe de tarifs.html (Museum Voices) ──────── Sélecteur de public, cartes par formule, une carte mise en avant. Les vues et les cycles de facturation se basculent par `data-aud` et `data-bill` sur #aia-plans, posés par /js/ai-academy.js : tout le texte reste dans le HTML, où le pipeline i18n le lit. Sans JS, les deux vues s'empilent en prix annuels et les sélecteurs, qui ne serviraient à rien, disparaissent. (Les lignes `.aia-frow` des quatre formats ont été remplacées par ces cartes le 2026-09-18.) */ .aia-plans { margin-top: 40px; } /* Sélecteurs alignés à gauche, sur le texte de la section (demande de Benjamin, 2026-09-18) — Museum Voices les centre. */ .aia-plans-bar { display: flex; justify-content: flex-start; } .aia-seg { display: none; border: 1px solid var(--rule); background: var(--paper); padding: 3px; } .js-on .aia-seg { display: inline-flex; } .aia-seg button { font-family: var(--f-mono, var(--f-body)); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border: none; background: none; color: var(--ink-3); padding: 9px 18px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .aia-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .aia-seg button:focus-visible { outline: 2px solid var(--aia-fill); outline-offset: 2px; } /* À 320 px, « Annuel · 2 mois offerts » passait sur deux lignes. */ @media (max-width: 400px) { .aia-seg button { padding: 9px 10px; } } .js-on .aia-plans[data-aud="institutions"] .aia-pview-ind, .js-on .aia-plans[data-aud="individuals"] .aia-pview-inst { display: none; } .aia-pview + .aia-pview { margin-top: 64px; } .js-on .aia-pview + .aia-pview { margin-top: 0; } .aia-plans[data-bill="year"] .bm, .aia-plans[data-bill="month"] .by { display: none; } .aia-plans-k { margin: 36px 0 0; font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .aia-plans-why { margin: 10px 0 0; max-width: 76ch; font-size: 15px; line-height: 1.65; color: var(--ink-2); } .aia-plans-bill { display: flex; justify-content: flex-start; margin-top: 22px; } .aia-plans-grid { display: grid; gap: 18px; margin-top: 18px; align-items: stretch; } .aia-plans-4 { grid-template-columns: repeat(4, 1fr); } .aia-plans-3 { grid-template-columns: repeat(3, 1fr); } .aia-plans-2 { grid-template-columns: repeat(2, 1fr); } .aia-plan { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--rule); background: var(--paper); } .aia-plan.featured { border: 2px solid var(--aia-fill); padding: 25px 23px; } .aia-plan .pk { margin: 0 0 12px; font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .aia-plan.featured .pk { color: var(--accent-text); } .aia-plan .pp { margin: 0; line-height: 1.1; } .aia-plan .pp small { display: block; margin-bottom: 4px; font-size: 12px; color: var(--ink-3); } .aia-plan .pp b { font-family: var(--f-display); font-size: 36px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); } .aia-plan .pp > span { font-size: 14px; color: var(--ink-3); } .aia-plan .ps { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); } .aia-plan .pd { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--ink-2); } .aia-plan .pr { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); } .aia-plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; display: grid; align-content: start; gap: 6px; } .aia-plan li { display: flex; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } .aia-plan li::before { content: "✓"; flex: none; font-weight: 600; color: var(--accent-text); } .aia-plan .aia-btn { text-align: center; } .aia-plans-foot { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); text-align: center; } @media (max-width: 1100px) { .aia-plans-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 920px) { .aia-plans-3 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .aia-plans-4, .aia-plans-2 { grid-template-columns: 1fr; } } .aia-buy-note { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; padding: 20px 22px; border-left: 3px solid var(--aia-fill); background: var(--paper-2); } .aia-buy-note p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); } .aia-buy-note b { font-weight: 600; color: var(--ink); } /* Encadré « prix juste » : le #solidaire de tarifs.html, commun aux deux publics. */ .aia-fair { margin-top: 18px; padding: 26px 24px; border: 1px solid var(--rule); background: var(--paper); text-align: center; } .aia-fair .aia-kick { margin: 0; } .aia-fair p:not(.aia-kick) { margin: 12px auto 18px; max-width: 64ch; font-size: 15px; line-height: 1.7; color: var(--ink-2); } @media (max-width: 920px) { .aia-buy-note { grid-template-columns: 1fr; } } /* ── Publics ─────────────────────────────────────────────────────────────── */ .aia-audgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; } .aia-acard { border: 2px solid var(--ink); padding: 30px 28px; background: var(--paper); transition: transform .3s ease, box-shadow .3s ease; } .aia-sec-alt .aia-acard { background: var(--paper-2); } .aia-acard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(26, 26, 26, .09); } .aia-acard .aud { font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); } .aia-acard h3 { margin: 10px 0 0; font-family: var(--f-display); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; font-weight: 400; color: var(--ink); } .aia-acard .stat { display: inline-block; margin-top: 12px; padding: 5px 10px; font-family: var(--f-mono, var(--f-body)); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); } .aia-acard > p { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); } .aia-acard ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; } .aia-acard li { display: flex; gap: 11px; font-size: 15px; line-height: 1.6; color: var(--ink-3); } .aia-acard li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; background: var(--aia-fill); } .aia-anext { grid-column: 1 / -1; border: 2px dashed var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .aia-anext:hover { transform: none; box-shadow: none; } @media (max-width: 920px) { .aia-audgrid, .aia-anext { grid-template-columns: 1fr; } } .aia-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; padding-top: 28px; border-top: 2px solid var(--ink); } .aia-proof dt { font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); } .aia-proof dd { margin: 9px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); } @media (max-width: 820px) { .aia-proof { grid-template-columns: 1fr; } } /* ── Commencer : diagnostic + instruments ────────────────────────────────── */ .aia-freegrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; margin-top: 44px; align-items: start; } @media (max-width: 980px) { .aia-freegrid { grid-template-columns: 1fr; } } .aia-diag { border: 2px solid var(--ink); padding: 32px 30px; background: var(--paper); } .aia-sec-alt .aia-diag { background: var(--paper-2); } .aia-diag-k { font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); } .aia-diag h3 { margin: 10px 0 0; font-family: var(--f-display); font-size: 23px; line-height: 1.25; font-weight: 400; color: var(--ink); } .aia-diag-prog { display: flex; gap: 5px; margin-top: 20px; padding: 0; list-style: none; } .aia-diag-prog li { flex: 1; height: 4px; background: var(--rule); } .aia-diag-prog li.done { background: var(--aia-fill); } .aia-diag-qn { margin: 20px 0 0; font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--ink-4); } .aia-diag-qt { margin: 8px 0 0; min-height: 78px; font-size: 17px; line-height: 1.5; color: var(--ink); } .aia-diag-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; } .aia-diag-btns button { font-family: var(--f-body); font-size: 13.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 12px 8px; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .aia-sec-alt .aia-diag-btns button { background: var(--paper-2); } .aia-diag-btns button:hover { border-color: var(--aia-fill); color: var(--accent-text); } .aia-diag-res .step { font-family: var(--f-display); font-size: 25px; line-height: 1.2; font-weight: 400; color: var(--accent-text); } .aia-diag-res .txt { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); } .aia-diag-res .reco { margin: 16px 0 0; padding: 13px 16px; border-left: 3px solid var(--aia-fill); background: var(--paper-2); font-size: 14px; line-height: 1.6; color: var(--ink-2); } .aia-sec-alt .aia-diag-res .reco { background: var(--paper); } .aia-diag-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; } .aia-diag-redo { font-family: var(--f-body); font-size: 13px; color: var(--ink-4); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .aia-diag-redo:hover { color: var(--ink); } /* Le diagnostic ne quitte JAMAIS le navigateur : rien n'est envoyé, rien n'est stocké. La mention le dit à l'écran, elle n'est pas décorative. */ .aia-diag-priv { margin: 16px 0 0; font-family: var(--f-mono, var(--f-body)); font-size: 10px; letter-spacing: .04em; line-height: 16px; color: var(--ink-4); } .aia-instr { display: grid; gap: 14px; } .aia-icard { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--rule); padding: 20px 22px; background: var(--paper); text-decoration: none; transition: transform .25s ease, border-color .25s ease; } .aia-sec-alt .aia-icard { background: var(--paper-2); } .aia-icard:hover { transform: translateY(-3px); border-color: var(--aia-fill); } .aia-icard b { display: block; font-family: var(--f-display); font-size: 17px; font-weight: 400; color: var(--ink); } .aia-icard span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--ink-3); } .aia-icard .tag { margin: 0; flex: none; font-family: var(--f-mono, var(--f-body)); font-size: 9px; font-weight: 500; letter-spacing: .1em; color: var(--accent-text); border: 1px solid var(--accent-text); padding: 5px 8px; white-space: nowrap; } .aia-freenote { margin: 16px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-4); } .aia-freenote a { color: var(--accent-text); } /* ── Vidéo ───────────────────────────────────────────────────────────────── */ .aia-video-wrap { max-width: 940px; margin: 40px auto 0; } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .aia-faq { margin-top: 40px; border-top: 2px solid var(--ink); } .aia-faq details { border-bottom: 1px solid var(--rule); } .aia-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 2px; font-family: var(--f-display); font-size: clamp(17px, 1.9vw, 21px); line-height: 1.35; font-weight: 400; color: var(--ink); } .aia-faq summary::-webkit-details-marker { display: none; } .aia-faq summary .fx { flex: none; font-size: 22px; line-height: 1; color: var(--accent-text); transition: transform .3s ease; } .aia-faq details[open] summary .fx { transform: rotate(45deg); } .aia-faq .fa { padding: 0 2px 22px; font-size: 15px; line-height: 1.75; color: var(--ink-2); max-width: 74ch; } /* ── Sortie ──────────────────────────────────────────────────────────────── */ .aia-final { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; } @media (max-width: 980px) { .aia-final { grid-template-columns: 1fr; } } .aia-side { border: 2px solid var(--ink); padding: 28px 28px 26px; background: var(--paper); } .aia-sec-alt .aia-side { background: var(--paper-2); } .aia-side .lab { font-family: var(--f-mono, var(--f-body)); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); } .aia-side p { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); } .aia-side dl { margin: 18px 0 0; display: grid; gap: 12px; } .aia-side dt { font-family: var(--f-mono, var(--f-body)); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); } .aia-side dd { margin: 3px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink); } .aia-side dd a { color: var(--accent-text); }