/* CENTRE HOLOSCOPE — feuille de style Transposée de la maquette Claude Design (sept. 2026). Univers : contemporain / scène. Angles droits, filets 1 px, titres géants. Toutes les couleurs sont ici : pour la variante kaki / orange, ne changer que :root. */ :root { --noir: #0E0E0E; --encre: #0E0E0E; --texte-2: #3A3835; --gris: #6B6862; --gris-clair: #A8A5A0; --ligne: #D9D6D0; --ligne-sombre: #333333; --bord-champ: #B8B5AF; --papier: #F4F1EB; --blanc: #FFFFFF; --accent: #E2452B; --accent-sombre: #C33A22; --ok-fond: #E4F1E7; --ok-bord: #1F7A3F; --ok-texte: #14532D; --err-fond: #FBE9E5; --err-texte: #8A2415; --accent-vif: #E2452B; /* filets, puces, survols */ --accent-sur-sombre: #E2452B; /* surtitres et numéros sur fond sombre */ --hero-bg: #141414; --placeholder-bg: #1A1A1A; --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif; --texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: var(--texte); /* police des petits labels */ --upper: uppercase; --lh-display: .9; --ls-display: .01em; --w-display: 400; --w-bold: 600; --h-hero: clamp(64px, 12.5vw, 184px); --h-formation: clamp(80px, 17vw, 240px); --h-cta: clamp(56px, 12vw, 160px); --h-xl: clamp(48px, 8vw, 112px); --h-lg: clamp(48px, 6vw, 88px); --h-md: clamp(40px, 5vw, 64px); --h-sm: 40px; --card-title: clamp(64px, 22cqw, 112px); --price-total: clamp(72px, 20cqw, 96px); --strip-dd: clamp(30px, 3vw, 40px); --max: 1240px; } /* ===== THÈME KAKI / ORANGE — palette de la maquette V2, typographie et mise en page de la V1. Activer avec (ou CONFIG.THEME dans site.js). ===== */ :root[data-theme="kaki"] { --noir: #57553A; --encre: #57553A; --texte-2: #57553A; --gris: #7E7C56; --gris-clair: #DDD9C4; --ligne: #D8D4C4; --ligne-sombre: #6E6C4E; --bord-champ: #A9A68E; --papier: #F4F1E8; --blanc: #FFFFFF; --accent: #B04E05; --accent-sombre: #8F3F04; --accent-vif: #E9720C; --accent-sur-sombre: #FBC79A; --hero-bg: #3E3C28; --placeholder-bg: #46442C; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } [hidden] { display: none !important; } a { color: inherit; } h1, h2, h3, .display { font-family: var(--display); font-weight: var(--w-display); letter-spacing: var(--ls-display); line-height: var(--lh-display); margin: 0; text-transform: var(--upper); } p { margin: 0; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; } .section { padding: clamp(56px, 8vw, 112px) 0; } .section--tight { padding: clamp(48px, 7vw, 96px) 0; } .section--noir { background: var(--noir); color: var(--papier); } .section--border { border-bottom: 1px solid var(--ligne); } .eyebrow { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: var(--w-bold); margin-bottom: 8px; } .section--noir .eyebrow, .price .eyebrow, .footer .eyebrow { color: var(--accent-sur-sombre); } .h-xl { font-size: var(--h-xl); } .h-lg { font-size: var(--h-lg); } .h-md { font-size: var(--h-md); } .h-sm { font-size: var(--h-sm); line-height: 1; } .lead { font-size: 17px; line-height: 1.55; max-width: 560px; text-wrap: pretty; } .muted { color: var(--texte-2); } .section--noir .muted { color: var(--gris-clair); } .small { font-size: 13px; color: var(--gris); line-height: 1.5; } .stack { display: flex; flex-direction: column; gap: 24px; } .cols { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; } .cols > * { flex: 1 1 300px; min-width: 0; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--noir); padding-bottom: 20px; } .section-head p { max-width: 380px; font-size: 15px; color: var(--texte-2); } /* ---- Boutons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; font-weight: var(--w-bold); font-size: 15px; text-decoration: none; border: 1.5px solid var(--noir); background: var(--noir); color: var(--papier); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; } .btn:hover { background: var(--accent-vif); border-color: var(--accent-vif); color: #fff; } .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--accent:hover { background: var(--accent-sombre); border-color: var(--accent-sombre); } .btn--ghost { background: transparent; color: var(--noir); } .btn--ghost:hover { background: var(--noir); color: var(--papier); border-color: var(--noir); } .section--noir .btn--ghost, .hero .btn--ghost { color: var(--papier); border-color: var(--papier); } .section--noir .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--papier); color: var(--noir); } .btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; } .btn--md { min-height: 48px; padding: 0 24px; } .btn--block { display: flex; width: 100%; } .link { color: var(--noir); text-decoration: underline; text-underline-offset: 4px; min-height: 36px; display: inline-flex; align-items: center; font-size: 14px; } .link:hover { color: var(--accent-vif); } .section--noir .link { color: var(--papier); } /* ---- En-tête ---- */ .header { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--ligne); } .header__bar { max-width: var(--max); margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; align-items: center; gap: 20px; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-height: 44px; } /* Logo : SVG inline (anneaux = currentColor, point = --logo-dot), même dessin partout, recoloré par thème et par fond */ .logo { color: var(--logo-ring, var(--noir)); --logo-dot: var(--accent-vif); } .logo__mark { width: 32px; height: 32px; flex: none; display: block; } .footer .logo { color: var(--papier); } .logo__text { font-family: var(--texte); font-weight: 500; font-size: 17px; letter-spacing: .22em; line-height: 1; text-transform: uppercase; color: var(--encre); } .footer .logo__text { color: var(--papier); } .logo__centre { display: none; } [data-theme="kaki"] { --logo-ring: #7E7C56; } :root:not([data-theme="kaki"]) .logo { --logo-dot: #D62828; } .nav { display: none; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 500; } .nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .nav a:hover { color: var(--accent-vif); } .header .btn { white-space: nowrap; } .menu-btn { margin-left: 0; min-height: 44px; min-width: 44px; padding: 0 4px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: var(--w-bold); color: var(--noir); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .header__cta-mobile { margin-left: auto; } .drawer { display: none; border-top: 1px solid var(--ligne); flex-direction: column; background: var(--papier); } .drawer[data-open="true"] { display: flex; } .drawer a { padding: 0 20px; min-height: 56px; display: flex; align-items: center; border-bottom: 1px solid var(--ligne); text-decoration: none; font-family: var(--display); font-size: 28px; letter-spacing: .04em; text-transform: var(--upper); } .drawer a:last-child { border-bottom: 0; } @media (min-width: 760px) { .nav { display: flex; } .menu-btn, .header__cta-mobile, .drawer { display: none !important; } } @media (max-width: 759px) { .header__cta-desktop { display: none; } .header__bar { gap: 10px; } .logo__text { font-size: 14px; letter-spacing: .16em; } .logo__mark { width: 28px; height: 28px; } .header .btn--sm { padding: 0 12px; font-size: 13px; } } /* ---- Hero ---- */ .hero { position: relative; min-height: min(92vh, 820px); display: flex; align-items: flex-end; color: var(--papier); overflow: hidden; background: var(--hero-bg) repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 12px, transparent 12px 24px); } .hero--formation { min-height: min(88vh, 780px); } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); opacity: .7; } .hero__inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 120px 20px 56px; width: 100%; display: flex; flex-direction: column; gap: 28px; } .hero--formation .hero__inner { padding: 110px 20px 48px; gap: 20px; } .hero h1 { font-size: var(--h-hero); line-height: calc(var(--lh-display) - .02); } .hero--formation h1 { font-size: var(--h-formation); line-height: calc(var(--lh-display) - .04); overflow-wrap: anywhere; text-transform: uppercase; } .hero .lead { font-size: clamp(16px, 1.4vw, 19px); } .hero__sub { font-size: clamp(20px, 2.4vw, 32px); font-weight: 500; line-height: 1.2; max-width: 720px; } .hero__desc { max-width: 600px; font-size: 17px; line-height: 1.5; color: var(--ligne); } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ligne); } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: var(--w-bold); letter-spacing: .08em; text-transform: var(--upper); } .badge--complet { background: var(--papier); color: var(--noir); } .badge--bientot { background: transparent; border: 1.5px solid var(--papier); color: var(--papier); } /* ---- Bandeau chiffres ---- */ .strip { border-bottom: 1px solid var(--ligne); } .strip__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .strip__grid > div { padding: 28px 20px; border-bottom: 1px solid var(--ligne); } .strip__grid > div + div { border-left: 1px solid var(--ligne); } .strip dt, .facts dt, .card dt, .kpis dt, .label-xs { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); } .strip dd { margin: 6px 0 0; font-family: var(--display); font-size: var(--strip-dd); line-height: 1; } @media (max-width: 400px) { .strip__grid > div + div { border-left: 0; } } /* ---- Listes numérotées / à filets ---- */ .rule-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--noir); font-size: 15px; line-height: 1.5; } .rule-list li { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--ligne); } .rule-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; background: var(--accent-vif); } .rule-list--plain li::before { display: none; } .section--noir .rule-list { border-top-color: var(--ligne-sombre); } .section--noir .rule-list li { border-bottom-color: var(--ligne-sombre); } .num-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 2px solid var(--accent-vif); font-size: 16px; line-height: 1.5; counter-reset: n; } .num-list li { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--accent-vif); counter-increment: n; } .num-list li::before { content: counter(n, decimal-leading-zero); font-family: var(--display); font-size: 24px; color: var(--accent); min-width: 32px; line-height: 1.1; } .num-list--sm { border-top: 1px solid var(--ligne); font-size: 14px; } .num-list--sm li { padding: 12px 0; border-bottom: 1px solid var(--ligne); gap: 14px; } .num-list--sm li::before { font-size: 22px; min-width: 28px; } .section--noir .num-list--sm, .section--noir .num-list--sm li { border-color: var(--ligne-sombre); } .num-list--dark { border-top: 1px solid var(--ligne-sombre); font-size: 15px; } .num-list--dark li { border-bottom: 1px solid var(--ligne-sombre); padding: 14px 0; gap: 16px; } .num-list--dark li::before { font-size: 20px; color: var(--accent-sur-sombre); } /* ---- Grille de faits ---- */ .facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--noir); font-size: 15px; line-height: 1.5; } .facts > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--ligne); } .facts dd { margin: 6px 0 0; } /* ---- Étapes numérotées (grille) ---- */ .steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--noir); counter-reset: s; } .steps li { padding: 24px 20px; border-bottom: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 12px; counter-increment: s; } .steps li:first-child { padding-left: 0; } .steps li + li { border-left: 1px solid var(--ligne); } .steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--display); font-size: 64px; line-height: .9; color: var(--accent); } .steps strong { font-size: 17px; } .steps p { font-size: 15px; color: var(--texte-2); } .steps--dark { border-top-color: var(--ligne-sombre); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .steps--dark li { border-color: var(--ligne-sombre); padding: 24px 20px 28px; } .steps--dark li::before { font-size: 72px; color: var(--accent-sur-sombre); } .steps--dark strong { font-size: 18px; line-height: 1.3; } .steps--dark p { color: var(--gris-clair); font-size: 14px; line-height: 1.55; } @media (max-width: 500px) { .steps li + li { border-left: 0; } .steps li { padding-left: 0; } } /* ---- Encarts ---- */ .box { border: 1px solid var(--noir); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; } .box .display { font-size: 36px; line-height: 1; } .box p { font-size: 15px; color: var(--texte-2); } .box--sm { padding: 20px; font-size: 14px; gap: 8px; } .box--sm p { font-size: 14px; color: inherit; } .section--noir .box { border-color: var(--papier); } /* ---- Cartes formation ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } .card { display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--ligne); height: 100%; container-type: inline-size; } .card__visual { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; text-decoration: none; color: var(--papier); background: var(--placeholder-bg) repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); } .card__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); } .card__badge { position: absolute; left: 16px; top: 16px; } .card__title { position: absolute; left: 14px; right: 14px; bottom: 4px; font-size: var(--card-title); overflow-wrap: anywhere; text-transform: uppercase; } .card__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .card__sub { font-size: 17px; font-weight: var(--w-bold); line-height: 1.3; } .card__kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-top: 6px; } .card__text { font-size: 15px; color: var(--texte-2); } .card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ligne); font-size: 14px; } .card dl > div { padding: 12px 0; border-bottom: 1px solid var(--ligne); } .card dl > div:nth-child(odd) { padding-right: 12px; } .card dl > div:nth-child(even) { border-left: 1px solid var(--ligne); padding-left: 12px; } .card dd { margin: 4px 0 0; font-weight: 500; } .card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .card__foot .link { align-self: center; font-size: 13px; } /* ---- Carte tarif ---- */ .price { background: var(--noir); color: var(--papier); padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; font-size: 14px; container-type: inline-size; } .price__total { font-family: var(--display); font-size: var(--price-total); line-height: .95; margin-top: 4px; } .price__note { color: var(--gris-clair); margin-top: 6px; } .price__note strong { color: var(--papier); } .price dl { margin: 0; border-top: 1px solid var(--ligne-sombre); } .price dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ligne-sombre); } .price dt span { display: block; color: var(--gris-clair); font-size: 12px; } .price dd { margin: 0; font-weight: var(--w-bold); white-space: nowrap; } .price .btn--accent { min-height: 52px; font-size: 16px; } .price .btn--ghost { color: var(--papier); border-color: var(--papier); } .price .btn--ghost:hover { background: var(--papier); color: var(--noir); } .price__foot { margin-top: -8px; text-align: center; font-size: 13px; color: var(--gris-clair); } .sticky { position: sticky; top: 84px; align-self: flex-start; } .aside { flex: 1 1 320px; max-width: 400px; } .main-col { flex: 1 1 520px; } /* ---- Formateur ---- */ .trainer__photo { flex: 1 1 280px; max-width: 440px; position: relative; aspect-ratio: 4/5; background: var(--placeholder-bg) repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); overflow: hidden; } .trainer__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); } .trainer__photo .display { position: absolute; left: 14px; bottom: 10px; color: var(--papier); font-size: 40px; } .trainer__body { flex: 1 1 380px; display: flex; flex-direction: column; gap: 20px; } .tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; } .tags li { padding: 8px 12px; border: 1px solid var(--noir); } /* ---- KPI ---- */ .kpis { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--noir); } .kpis > div { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--ligne); } .kpis > div:nth-child(even) { border-left: 1px solid var(--ligne); padding-left: 12px; } .kpis dd { margin: 0; font-family: var(--display); font-size: 44px; line-height: 1; } .kpis dt { font-size: 12px; text-transform: none; letter-spacing: 0; } /* ---- Mosaïque photos ---- */ .mosaic { flex: 1 1 320px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mosaic > div { position: relative; aspect-ratio: 4/5; background: var(--placeholder-bg) repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); overflow: hidden; } .mosaic > div:nth-child(2) { margin-top: 40px; } .mosaic > div:nth-child(3) { margin-top: -40px; } .mosaic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); } .mosaic span { position: absolute; left: 10px; bottom: 10px; font: 11px/1 ui-monospace, Menlo, monospace; color: #8F8C86; } /* ---- Contact / appel final ---- */ .cta-final { padding: clamp(72px, 10vw, 140px) 20px; text-align: center; } .cta-final .wrap { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 28px; } .cta-final h2 { font-size: var(--h-cta); line-height: calc(var(--lh-display) - .02); } .cta-final .contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; font-size: clamp(18px, 2.4vw, 28px); font-weight: 500; } .cta-final .contacts a { color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; } .cta-final .contacts a:hover { color: var(--accent-sur-sombre); } /* ---- Formulaire ---- */ .form { display: flex; flex-direction: column; gap: 48px; } .form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; min-width: 0; } .form legend, .form__h { display: block; width: 100%; padding: 0 0 12px; margin: 0 0 8px; border-bottom: 1px solid var(--noir); font-family: var(--display); font-size: 40px; line-height: 1; text-transform: uppercase; } .form__context { border: 1px solid var(--noir); padding: 20px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; } .form__context .display { font-size: 32px; line-height: 1; margin-top: 4px; } .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: var(--w-bold); } .field .hint { font-weight: 400; color: var(--gris); } .field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--bord-champ); background: var(--blanc); font: inherit; font-size: 16px; font-weight: 400; color: var(--encre); border-radius: 0; } .field textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-vif); outline-offset: 2px; } .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .sub { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: var(--w-bold); } .opts { display: flex; flex-direction: column; gap: 2px; } .opt { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; font-weight: 400; } .opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent-vif); flex: none; } .opt--top { align-items: flex-start; line-height: 1.5; } .opt--top input { margin-top: 2px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--bord-champ); font-size: 14px; cursor: pointer; font-weight: 400; } .chip:has(input:checked) { border-color: var(--noir); background: var(--blanc); } .chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-vif); } .form button[type=submit] { width: 100%; min-height: 56px; padding: 0 24px; background: var(--accent); color: #fff; border: 0; font: inherit; font-size: 16px; font-weight: var(--w-bold); cursor: pointer; } .form button[type=submit]:hover { background: var(--accent-sombre); } .form button[type=submit]:disabled { opacity: .6; cursor: wait; } .form button[type=submit]:focus-visible { outline: 3px solid var(--noir); outline-offset: 2px; } .form__legal { text-align: center; font-size: 13px; color: var(--gris); } .info { padding: 14px 16px; border: 1px solid var(--ligne); font-size: 14px; color: var(--texte-2); } .alert { background: var(--err-fond); border: 1px solid var(--accent-vif); color: var(--err-texte); padding: 20px 24px; display: none; flex-direction: column; gap: 6px; font-size: 15px; } .alert[data-show="true"] { display: flex; } .success { background: var(--ok-fond); border: 1px solid var(--ok-bord); color: var(--ok-texte); padding: 32px 28px; display: none; flex-direction: column; gap: 16px; } .success[data-show="true"] { display: flex; } .success .display { font-size: var(--h-lg); } .success .btn { align-self: flex-start; background: transparent; color: var(--ok-texte); border-color: var(--ok-texte); } .success .btn:hover { background: var(--ok-texte); color: #fff; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .aside-form { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 24px; } .aside-form .box { gap: 20px; } .aside-form .contact { display: flex; flex-direction: column; gap: 6px; font-size: 15px; padding: 0 4px; } .aside-form .contact a { text-decoration: none; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; } .aside-form .contact a:hover { color: var(--accent-vif); } /* ---- Pied de page ---- */ .footer { background: var(--noir); color: var(--papier); font-size: 14px; line-height: 1.6; } .footer__grid { max-width: var(--max); margin: 0 auto; padding: 64px 20px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; } .footer__grid > div, .footer__grid > nav { display: flex; flex-direction: column; gap: 12px; } .footer a { color: var(--papier); text-decoration: none; } .footer a:hover { color: var(--accent-sur-sombre); } .footer nav a { min-height: 36px; display: flex; align-items: center; } .footer address { font-style: normal; display: flex; flex-direction: column; gap: 4px; } .footer .sep { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--ligne-sombre); } .footer__legal { border-top: 1px solid var(--ligne-sombre); } .footer__legal p { max-width: var(--max); margin: 0 auto; padding: 20px; font-size: 12px; color: var(--gris-clair); } .footer .muted { color: var(--gris-clair); } /* ---- Pages légales ---- */ .prose { max-width: 72ch; margin: 0 auto; font-size: 16px; line-height: 1.65; display: flex; flex-direction: column; gap: 40px; } .prose header { display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--noir); padding-bottom: 24px; } .prose header h1 { font-size: clamp(56px, 8vw, 96px); } .prose header nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; } .prose section { display: flex; flex-direction: column; gap: 12px; } .prose h2 { font-size: 36px; line-height: 1; } .prose table { width: 100%; border-collapse: collapse; font-size: 15px; border-top: 1px solid var(--noir); } .prose th { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ligne); font-weight: 600; width: 30%; } .prose thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); border-bottom-color: var(--noir); width: auto; padding: 10px 12px 10px 0; } .prose td { vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--ligne); } .prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .todo { font-family: var(--mono), ui-monospace, Menlo, monospace; font-size: 14px; color: var(--gris); } .price__total .todo, .strip dd .todo, .kpis dd .todo { font-family: inherit; font-size: inherit; color: var(--gris-clair); } .strip dd .todo, .kpis dd .todo { color: var(--gris); } /* ---- Accessibilité ---- */ .skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 12px 16px; z-index: 100; } .skip:focus { left: 16px; top: 16px; } :focus-visible { outline: 3px solid var(--accent-vif); outline-offset: 2px; } .section--noir :focus-visible, .hero :focus-visible, .price :focus-visible { outline-color: var(--papier); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }