/* ═══════════════════════════════════════════════════════════════════════════ Bloc d'inscription aux listes (double confirmation), sur les pages statiques : éditions des rapports et livres blancs. ═══════════════════════════════════════════════════════════════════════════ Le balisage est écrit au build par src/inscription.js (inscriptionHtml) à la place du marqueur

, et le comportement est public/inscription.js. Mode d'emploi : l'en-tête de ce dernier. UNE feuille pour les deux familles de pages, parce que la structure du bloc est la même partout. Ce qui diffère, les couleurs, passe par les variables --ins-*, branchées plus bas sur la palette de la page hôte : - une édition de rapport : les jetons de public/rapports/rapport.css (fond bleu nuit, surfaces surélevées, orange de marque) ; - un livre blanc : les variables de SA feuille, qui vient de cyberazimut-docs avec le (--navy, --slate, --orange, --fog…). Le bloc y est un encadré bleu nuit sur le papier blanc, comme le bandeau d'appel à l'action du document. Il doit donc être posé DANS `.doc`. Aucune couleur écrite en dur ici : uniquement des variables des pages hôtes, qui recopient elles-mêmes les jetons de packages/brand. Tient à 390 px : le seul élément de largeur fixe est le widget Turnstile (300 px), et le bloc garde au moins 318 px de contenu à cette largeur. Rien ne s'imprime. */ /* ── Édition de rapport (défaut) ── */ .ca-ins { --ins-fond: var(--surface); --ins-champ: var(--ground); --ins-texte: var(--ink); --ins-texte-2: var(--ink-2); --ins-filet: var(--rule-strong); --ins-accent: var(--cz-orange); --ins-sur-accent: var(--cz-navy); --ins-erreur: var(--st-crit); --ins-police: var(--sans); } /* ── Livre blanc : la palette de la feuille du document ── */ .doc .ca-ins { --ins-fond: var(--navy); --ins-champ: var(--slate); --ins-texte: var(--fog); --ins-texte-2: var(--gris-c); --ins-filet: var(--gris); --ins-accent: var(--orange); --ins-sur-accent: var(--navy); --ins-erreur: var(--orange-p); --ins-police: var(--sans); } .ca-ins { position: relative; box-sizing: border-box; max-width: 720px; margin: 40px 0; padding: 24px 26px 22px; background: var(--ins-fond); color: var(--ins-texte); border: 1px solid var(--ins-filet); border-left: 3px solid var(--ins-accent); border-radius: 0 8px 8px 0; font-family: var(--ins-police); font-size: 15.5px; line-height: 1.55; letter-spacing: normal; overflow-wrap: break-word; } .ca-ins *, .ca-ins *::before, .ca-ins *::after { box-sizing: border-box; } /* `hidden` doit gagner contre les `display` ci-dessous. */ .ca-ins [hidden] { display: none !important; } .ca-ins .ca-ins-titre { margin: 0 0 6px; font-family: var(--ins-police); font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -0.015em; color: var(--ins-texte); } .ca-ins .ca-ins-intro { margin: 0 0 18px; max-width: 62ch; font-size: 15px; color: var(--ins-texte-2); } .ca-ins .ca-ins-form { display: grid; gap: 16px; margin: 0; } .ca-ins .ca-ins-champ { display: grid; gap: 6px; } .ca-ins .ca-ins-label, .ca-ins .ca-ins-legende { padding: 0; font-size: 13px; font-weight: 650; letter-spacing: 0.02em; color: var(--ins-texte); } .ca-ins .ca-ins-legende { margin: 0 0 8px; } /* 16 px : en dessous, Safari sur iPhone zoome la page au focus. */ .ca-ins .ca-ins-input { width: 100%; max-width: 420px; min-height: 44px; margin: 0; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ins-texte); background: var(--ins-champ); border: 1px solid var(--ins-filet); border-radius: 6px; } .ca-ins .ca-ins-input[aria-invalid="true"] { border-color: var(--ins-erreur); } .ca-ins .ca-ins-listes { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; } .ca-ins .ca-ins-case { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; cursor: pointer; } .ca-ins .ca-ins-case input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ins-accent); } /* Le champ piège : hors écran plutôt que masqué, hors tabulation, hors arbre d'accessibilité (attributs posés par inscriptionHtml). */ .ca-ins .ca-ins-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .ca-ins .ca-ins-erreur { margin: 2px 0 0; max-width: none; font-size: 13.5px; font-weight: 600; color: var(--ins-erreur); } .ca-ins .ca-ins-erreur:empty, .ca-ins .ca-ins-message:empty, .ca-ins .ca-ins-turnstile:empty { display: none; } .ca-ins .ca-ins-message { margin: 0; max-width: none; padding: 10px 12px; font-size: 14.5px; color: var(--ins-texte); background: color-mix(in srgb, var(--ins-erreur) 12%, transparent); border-left: 3px solid var(--ins-erreur); border-radius: 0 6px 6px 0; } .ca-ins .ca-ins-bouton { justify-self: start; min-height: 44px; margin: 0; padding: 10px 22px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ins-sur-accent); background: var(--ins-accent); border: 0; border-radius: 999px; cursor: pointer; transition: filter 140ms ease, opacity 140ms ease; } .ca-ins .ca-ins-bouton:hover:not(:disabled) { filter: brightness(1.1); } .ca-ins .ca-ins-bouton:disabled { opacity: 0.5; cursor: not-allowed; } .ca-ins .ca-ins-legal, .ca-ins .ca-ins-sansjs { margin: 0; max-width: none; font-size: 12.5px; color: var(--ins-texte-2); } .ca-ins .ca-ins-sansjs { font-size: 14px; color: var(--ins-texte); } .ca-ins .ca-ins-legal a, .ca-ins .ca-ins-sansjs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .ca-ins .ca-ins-legal a:hover, .ca-ins .ca-ins-sansjs a:hover { color: var(--ins-accent); } .ca-ins .ca-ins-succes { margin: 0; max-width: none; padding: 14px 16px; font-size: 15.5px; color: var(--ins-texte); background: var(--ins-champ); border-left: 3px solid var(--ins-accent); border-radius: 0 6px 6px 0; } .ca-ins .ca-ins-input:focus-visible, .ca-ins .ca-ins-case input:focus-visible, .ca-ins .ca-ins-bouton:focus-visible, .ca-ins a:focus-visible, .ca-ins .ca-ins-succes:focus-visible { outline: 2px solid var(--ins-accent); outline-offset: 2px; } @media screen and (max-width: 640px) { .ca-ins { margin: 30px 0; padding: 20px 16px 18px; } .ca-ins .ca-ins-bouton { justify-self: stretch; } } @media print { .ca-ins { display: none !important; } } @media (prefers-reduced-motion: reduce) { .ca-ins .ca-ins-bouton { transition: none; } }