/* ───────────────────────────────────────────────────────── Émotivance · /appuis/… — les quatre appuis, une page chacun. Même squelette pour les quatre : un bandeau (texte + photo), une rangée d'items, une question, puis les deux portes de sortie. Trois variantes seulement : `au-hero--left` la photo passe à gauche, `au-items--chips` les items sont posés en ligne, sans cadre, `.au-ink` sur bascule toute la page en bleu nuit. Préfixe `au-` — aucune collision avec la coque (`em-`), les pages d'offre (`of-`/`od-`) ni l'accueil (`hm-`). ───────────────────────────────────────────────────────── */ /* ═══ Page bleu nuit (appui 03) ═══════════════════════ */ .au-ink { background: var(--slab-ink); color: var(--on-ink, #f3efe6); } .au-ink .au-hero__title, .au-ink .au-item__label, .au-ink .au-crumbs [aria-current] { color: var(--ink-inverse); } .au-ink .au-hero__text, .au-ink .au-item__text { color: color-mix(in srgb, var(--ink-inverse) 80%, transparent); } .au-ink .au-item { border-color: var(--ornament-35); background: transparent; } .au-ink .au-crumbs a { color: color-mix(in srgb, var(--ink-inverse) 70%, transparent); } /* Sur le bleu nuit, le nom de l'appui passe en champagne : le petrole du mode clair y tomberait sous le seuil de contraste. */ .au-ink .au-hero__label { color: var(--on-slab-ink); } /* ═══ Fil d'Ariane ════════════════════════════════════ */ .au-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-block: var(--sp-5) 0; font-size: var(--t-sm); color: var(--ink-3); } .au-crumbs a { color: var(--ink-3); } .au-crumbs a:hover { color: var(--accent-text); } /* ═══ Bandeau ═════════════════════════════════════════ */ .au-hero { padding-block: clamp(32px, 2rem + 2vw, 64px) var(--section-y-sm); } .au-hero__grid { display: grid; gap: clamp(28px, 3vw, 64px); align-items: center; } @media (min-width: 900px) { .au-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* La photo passe devant le texte sans toucher à l'ordre du DOM : le titre reste le premier élément lu. */ .au-hero--left .au-hero__media { order: -1; } } /* Numéro, filet, nom de l'appui — la signature de la page. */ .au-hero__kicker { display: flex; align-items: center; gap: var(--sp-3); } .au-hero__num { font-family: var(--font-heading); font-size: var(--t-h4); color: var(--ornament-deep); font-variant-numeric: tabular-nums; } .au-hero__dash { width: 26px; height: 1px; background: var(--ornament); } .au-hero__label { font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); } .au-hero__title { margin-top: var(--sp-4); /* Un cran sous --t-h1 : à 72px, « a-t-elle » se coupait en deux lignes dans la demi-colonne. */ max-width: 24ch; font-size: clamp(34px, 1.4rem + 2.8vw, 62px); } .au-hero__text { margin-top: var(--sp-5); max-width: 50ch; color: var(--ink-2); } .au-hero__text + .au-hero__text { margin-top: var(--sp-3); } .au-hero__media { min-height: clamp(320px, 38vw, 520px); height: 100%; border-radius: var(--r-2xl); } .au-hero__media img { position: absolute; inset: 0; } @media (max-width: 899px) { .au-hero__media { min-height: 0; aspect-ratio: 4 / 3; } } /* ═══ Les items ═══════════════════════════════════════ */ .au-items { display: grid; gap: var(--sp-4); margin-top: clamp(32px, 3vw, 56px); list-style: none; } .au-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--ornament-35); border-radius: var(--r-lg); background: var(--white); } .au-item__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ornament-deep); } .au-item__icon svg { width: 100%; height: 100%; } .au-item__label { font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink); } .au-item__text { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--t-md); } /* Un item qui porte un texte passe en grille : le pictogramme tient la marge sur deux rangs, l'intitulé et le texte s'empilent. */ .au-item:has(.au-item__text) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; } .au-item:has(.au-item__text) .au-item__icon { grid-row: 1 / span 2; width: 52px; height: 52px; } /* Variante « en ligne » — sans cadre, séparés par un filet. */ .au-items--chips { display: flex; flex-wrap: wrap; gap: var(--sp-5) 0; } .au-items--chips .au-item { flex: 0 1 auto; padding: 0 var(--sp-6); border: 0; border-inline-end: 1px solid var(--hairline, var(--ornament-35)); border-radius: 0; background: none; } .au-items--chips .au-item:first-child { padding-inline-start: 0; } .au-items--chips .au-item:last-child { border-inline-end: 0; } .au-items--chips .au-item__icon { width: 46px; height: 46px; padding: 10px; border: 1px solid var(--ornament-60); border-radius: var(--r-pill); } .au-items--chips .au-item__label { font-family: var(--font-body); font-size: var(--t-base); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); } @media (min-width: 700px) { .au-items--cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .au-items--boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ═══ La question ═════════════════════════════════════ Trois formes selon la page : posée sur la photo (01, 04), en bandeau (02) ou en filet centré (03). */ .au-question { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--ornament-60); border-radius: var(--r-lg); background: var(--white); } .au-question p { font-family: var(--font-heading); font-size: var(--t-h4); line-height: var(--lh-snug); color: var(--accent-text); } .au-question__mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ornament-deep); } .au-question__mark svg { width: 100%; height: 100%; } .au-ink .au-question { background: transparent; } .au-ink .au-question p { color: var(--on-slab-ink); } /* Posée sur la photo — elle mord sur le cadre, d'où l'ombre. */ @media (min-width: 900px) { .au-hero__grid:has(.au-question--float) { position: relative; } .au-question--float { position: absolute; inset-block-end: 12%; inset-inline-start: 46%; z-index: 2; max-width: 330px; margin-top: 0; border-color: transparent; box-shadow: var(--shadow); } .au-question--float p { font-size: var(--t-base); font-family: var(--font-body); color: var(--ink); } } /* Filet centré — la question tient la ligne, pas le cadre. */ .au-question--rule { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-5); align-items: center; padding: 0; border: 0; background: none; text-align: center; } .au-question--rule::before, .au-question--rule::after { content: ""; height: 1px; background: var(--ornament-35); } .au-question--rule .au-question__mark { display: none; } .au-question--rule p { font-size: var(--t-h5); color: var(--on-slab-ink); } /* ═══ Les deux portes de sortie ═══════════════════════ */ .au-paths { display: grid; gap: var(--sp-4); margin-top: clamp(32px, 3vw, 56px); } @media (min-width: 800px) { .au-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .au-path { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--ornament-60); border-radius: var(--r-lg); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Le libellé reste en ivoire au survol : c'est le fond qui s'éclaircit pour signaler le lien, pas l'encre qui change. */ .au-path--ink { --link-hover: var(--ink-inverse); background: var(--slab-ink); border-color: var(--slab-ink); color: var(--ink-inverse); } .au-path--ink:hover { background: color-mix(in srgb, var(--ink-inverse) 9%, var(--slab-ink)); border-color: color-mix(in srgb, var(--ink-inverse) 9%, var(--slab-ink)); } .au-path--ink .au-path__icon, .au-path--ink .au-path__label { color: var(--on-slab-ink); } .au-path--line:hover { border-color: var(--ornament-deep); background: var(--white); } /* Sur le bleu nuit, les deux portes passent en ivoire : c'est le contraste qui les détache, pas la couleur. */ .au-ink .au-path { background: var(--primary-4); border-color: var(--primary-4); color: var(--ink); } .au-ink .au-path__icon { color: var(--accent-text); } .au-ink .au-path__label { color: var(--ornament-deep); } .au-path__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; color: var(--ornament-deep); } .au-path__icon svg { width: 100%; height: 100%; } .au-path__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .au-path__label { font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ornament-deep); } .au-path__text { font-family: var(--font-heading); font-size: var(--t-h5); } .au-path__arrow { flex: none; margin-inline-start: auto; display: grid; place-items: center; width: 24px; height: 24px; transition: transform var(--dur) var(--ease); } .au-path__arrow svg { width: 100%; height: 100%; } .au-path:hover .au-path__arrow { transform: translateX(4px); } @media (max-width: 559px) { .au-hero__title { max-width: none; } .au-items--chips { flex-direction: column; } .au-items--chips .au-item { padding: 0; border-inline-end: 0; } .au-question { flex-direction: column; align-items: flex-start; } .au-path { padding: var(--sp-4); gap: var(--sp-3); } }