/* Theme public - pages hors back-office Portee : les pages vues par les candidats, participants et prestataires. - Formulaires autonomes (templates/public/*) : . - Espace participant / prestataire : charge par layout.php pour la classe `participant-space-page`, qui n'utilise que les jetons --p-* ci-dessous. Identite volontairement distincte du back-office (theme.css) : fond papier chaud et vert GFCA, la ou le back-office est gris froid et orange. 01. Jetons 02. Base des pages autonomes 03. En-tete de marque 04. Titres et chapeaux 05. Messages (avis, erreurs) 06. Formulaires 07. Boutons et actions 08. Blocs conditionnels et captcha 09. Questionnaire (meta, notes, commentaires) 10. Consentement Analytics 11. Variantes de page 12. Responsive */ /* ========================================================================== 01. Jetons ========================================================================== */ :root { --p-bg: #f1eee8; --p-panel: #ffffff; --p-sunken: #faf8f4; --p-text: #1c211f; --p-text-soft: #4a504d; --p-muted: #6f7572; --p-line: #e4e0d8; --p-line-strong: #cec8bc; --p-accent: #1f6b57; --p-accent-dark: #17513f; --p-accent-soft: #edf4f1; --p-danger: #9b2c2c; --p-danger-soft: #fcf2f1; --p-warning: #8a5a00; --p-warning-soft: #fcf5e6; --p-success: #146c43; --p-success-soft: #edf5f0; --p-radius: 14px; --p-radius-sm: 10px; --p-shadow: 0 1px 2px rgba(28, 33, 31, 0.05), 0 14px 34px rgba(28, 33, 31, 0.07); --p-focus: 0 0 0 3px rgba(31, 107, 87, 0.22); --p-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif; } /* ========================================================================== 02. Base des pages autonomes ========================================================================== */ html { color-scheme: light; } body.public-page, body.public-page * { box-sizing: border-box; } body.public-page { margin: 0; color: var(--p-text); background: var(--p-bg); font-family: var(--p-font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } body.public-page main { width: min(660px, calc(100% - 28px)); margin: 44px auto 72px; padding: 34px 36px 38px; background: var(--p-panel); border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow); overflow: hidden; } /* ========================================================================== 03. En-tete de marque ========================================================================== */ /* Le bloc marque differe selon le formulaire (logo a gauche ou a droite) : une rangee souple accepte les deux ordres de balises sans les modifier. */ body.public-page .brand { display: flex; gap: 16px; align-items: center; margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--p-line); text-align: left; } /* La cale vide qui centrait l'ancien en-tete n'a plus d'utilite. */ body.public-page .brand > span:empty { display: none; } body.public-page .brand > div { flex: 1 1 auto; min-width: 0; } body.public-page .brand img, body.public-page .brand-logo { display: block; flex: 0 0 auto; width: 54px; height: auto; } body.public-page .brand-title { color: var(--p-text); font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } body.public-page .brand-title strong { font-size: inherit; font-weight: 700; } body.public-page .brand-subtitle { margin-top: 2px; color: var(--p-muted); font-size: 13px; line-height: 1.35; } body.public-page .brand-tagline { color: var(--p-muted); font-size: 12px; line-height: 1.35; } body.public-page .lang-link { flex: 0 0 auto; margin-left: auto; padding: 6px 14px; color: var(--p-accent-dark); background: var(--p-accent-soft); border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } body.public-page .lang-link:hover, body.public-page .lang-link:focus-visible { color: #fff; background: var(--p-accent); outline: 0; } body.public-page main > .lang-link { display: block; width: max-content; margin: 0 0 18px auto; } /* ========================================================================== 04. Titres et chapeaux ========================================================================== */ body.public-page h1 { margin: 0 0 8px; font-size: 30px; font-weight: 650; line-height: 1.12; letter-spacing: -0.022em; text-align: left; text-transform: none; } body.public-page .subtitle, body.public-page .intro { margin: 0 0 30px; color: var(--p-muted); font-size: 14px; text-align: left; } /* Titre de section : petite capitale accentuee prolongee par un filet. */ body.public-page h2 { display: flex; gap: 12px; align-items: center; margin: 26px 0 16px; color: var(--p-accent); font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } body.public-page h2::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--p-line); } /* Le chapeau du formulaire a deja pose l'ecart : pas de marge en plus. */ body.public-page form > h2:first-of-type { margin-top: 0; } /* ========================================================================== 05. Messages (avis, erreurs) ========================================================================== */ body.public-page .notice, body.public-page .error { margin: 0 0 16px; padding: 12px 16px; border: 1px solid; border-left-width: 3px; border-radius: var(--p-radius-sm); font-size: 14px; } body.public-page .notice { color: var(--p-warning); background: var(--p-warning-soft); border-color: #e6cf9a; border-left-color: var(--p-warning); } body.public-page .error { color: var(--p-danger); background: var(--p-danger-soft); border-color: #eec4c1; border-left-color: var(--p-danger); } /* ========================================================================== 06. Formulaires ========================================================================== */ body.public-page form { display: grid; gap: 18px; min-width: 0; } body.public-page .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; min-width: 0; } body.public-page .full { grid-column: 1 / -1; } body.public-page label { display: grid; gap: 7px; min-width: 0; color: var(--p-text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; /* Libelle en haut, champ en bas : les champs d'une meme ligne de la grille restent alignes meme quand un seul libelle porte un texte d'aide. */ align-content: space-between; } /* Texte d'aide sous le libelle : lisible sans concurrencer le libelle. */ body.public-page label > span, body.public-page label > small { margin-top: -3px; min-width: 0; color: var(--p-muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; } body.public-page .checkbox-label { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--p-text); font-weight: 500; align-content: initial; } body.public-page .checkbox-label input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--p-accent); } body.public-page .checkbox-label > span { margin: 0; color: var(--p-text); font-size: 14px; } body.public-page .checkbox-label small { display: inline; margin-left: 4px; color: var(--p-muted); font-weight: 500; } body.public-page .consent-list { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--p-line); } body.public-page .public-inline-link { color: var(--p-accent); font-weight: 600; text-decoration: none; } body.public-page .public-inline-link:hover, body.public-page .public-inline-link:focus-visible { color: var(--p-accent-dark); text-decoration: underline; } body.public-page .policy-content { display: grid; gap: 18px; } body.public-page .policy-content h2 { margin-top: 8px; } body.public-page .policy-content p, body.public-page .policy-content ul { margin: 0; color: var(--p-text-soft); } body.public-page .policy-content ul { padding-left: 20px; } body.public-page input, body.public-page select, body.public-page textarea { display: block; width: 100%; max-width: 100%; min-width: 0; padding: 10px 13px; color: var(--p-text); background: #fff; border: 1px solid var(--p-line-strong); border-radius: var(--p-radius-sm); font: inherit; font-size: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.public-page input, body.public-page select { min-height: 44px; } body.public-page input:hover, body.public-page select:hover, body.public-page textarea:hover { border-color: #b6ae9f; } body.public-page input:focus, body.public-page select:focus, body.public-page textarea:focus { outline: 0; border-color: var(--p-accent); box-shadow: var(--p-focus); } body.public-page textarea { min-height: 104px; line-height: 1.5; resize: vertical; } /* Chevron dessine en CSS : pas de fleche systeme heterogene entre navigateurs. */ body.public-page select { padding-right: 38px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236f7572' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; -webkit-appearance: none; appearance: none; } body.public-page select:disabled, body.public-page option:disabled { color: #a8a49b; } body.public-page input[type="file"] { padding: 9px 12px; color: var(--p-text-soft); background: var(--p-sunken); font-size: 13px; cursor: pointer; } body.public-page input[type="date"] { -webkit-appearance: none; appearance: none; } /* Champ pot de miel : hors ecran, jamais atteignable au clavier visuellement. */ body.public-page .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== 07. Boutons et actions ========================================================================== */ body.public-page .actions { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 26px; border-top: 1px solid var(--p-line); } body.public-page button, body.public-page .button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 46px; max-width: 100%; padding: 12px 28px; color: #fff; background: var(--p-accent); border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } body.public-page button:hover, body.public-page .button:hover { background: var(--p-accent-dark); } body.public-page button:active, body.public-page .button:active { transform: translateY(1px); } body.public-page button:focus-visible, body.public-page .button:focus-visible { outline: 0; box-shadow: var(--p-focus); } /* ========================================================================== 08. Blocs conditionnels et captcha ========================================================================== */ /* Volet revele par le JS du formulaire : il reste `display:none` par defaut. */ body.public-page .conditional { display: none; padding: 20px; background: var(--p-sunken); border: 1px solid var(--p-line); border-left: 3px solid var(--p-accent); border-radius: var(--p-radius-sm); } body.public-page .conditional.is-visible { display: grid; gap: 18px; } body.public-page .captcha { display: flex; width: 100%; max-width: 100%; justify-content: center; margin-top: 6px; overflow: hidden; } /* ========================================================================== 09. Questionnaire (meta, notes, commentaires) ========================================================================== */ body.public-page .meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0 0 26px; padding: 18px 20px; background: var(--p-sunken); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); font-size: 14px; } body.public-page .meta strong { display: block; margin-bottom: 2px; color: var(--p-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.public-page .legend { margin: 0; color: var(--p-muted); font-size: 13px; } body.public-page fieldset { margin: 0; padding: 16px 18px; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); } /* Une question tient souvent sur deux lignes : `float` sort le libelle du bord du fieldset et le remet dans le flux, en tete de la carte. */ body.public-page legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; color: var(--p-text); font-size: 14px; font-weight: 600; line-height: 1.45; } body.public-page .score-row { display: flex; gap: 16px; align-items: center; clear: both; } /* Le libelle "obligatoire" est vide dans la plupart des langues. */ body.public-page .score-row > span:empty { display: none; } /* Echelle de 1 a 5 : groupe segmente, la case cochee prend l'accent. */ body.public-page .scores { display: grid; grid-template-columns: repeat(5, 46px); gap: 8px; } body.public-page .scores label { position: relative; display: grid; place-items: center; height: 44px; color: var(--p-text-soft); background: #fff; border: 1px solid var(--p-line-strong); border-radius: var(--p-radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } body.public-page .scores label:hover { border-color: var(--p-accent); background: var(--p-accent-soft); } body.public-page .scores input { position: absolute; opacity: 0; pointer-events: none; } body.public-page .scores label:has(input:checked) { color: #fff; background: var(--p-accent); border-color: var(--p-accent); } body.public-page .scores label:has(input:focus-visible) { outline: 0; box-shadow: var(--p-focus); } body.public-page .comments { display: grid; gap: 18px; } /* ========================================================================== 10. Consentement Analytics ========================================================================== */ body.public-page .analytics-consent[hidden] { display: none; } body.public-page .analytics-consent { position: fixed; right: 18px; bottom: 18px; left: 18px; z-index: 40; display: flex; gap: 16px; align-items: center; justify-content: space-between; width: min(760px, calc(100% - 36px)); margin: 0 auto; padding: 16px 18px; background: #fff; border: 1px solid var(--p-line-strong); border-radius: var(--p-radius-sm); box-shadow: 0 10px 28px rgba(28, 33, 31, 0.16); } body.public-page .analytics-consent p { margin: 0; color: var(--p-text-soft); font-size: 13.5px; } body.public-page .analytics-consent-actions { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; } body.public-page .analytics-consent button, body.public-page .analytics-consent-manage { min-height: 38px; padding: 9px 16px; font-size: 13px; } body.public-page .analytics-consent .analytics-consent-secondary { color: var(--p-accent-dark); background: var(--p-accent-soft); border: 1px solid #c5dad2; } body.public-page .analytics-consent .analytics-consent-secondary:hover { color: #fff; background: var(--p-accent); } body.public-page .analytics-consent-manage { position: fixed; right: 18px; bottom: 18px; z-index: 30; color: var(--p-accent-dark); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--p-line-strong); box-shadow: 0 5px 18px rgba(28, 33, 31, 0.08); } body.public-page .analytics-consent-manage:hover { color: #fff; background: var(--p-accent); } /* ========================================================================== 11. Variantes de page ========================================================================== */ /* Questionnaire : plus de champs par ligne, donc une carte plus large. */ body.public-page.is-wide main { width: min(840px, calc(100% - 28px)); } /* Pages d'un seul message (merci, indisponible) : carte courte et centree. */ body.public-page.is-message main { width: min(540px, calc(100% - 28px)); margin-top: 64px; text-align: center; } body.public-page.is-message main > img { display: block; width: 62px; height: auto; margin: 0 auto 18px; } body.public-page.is-message h1 { text-align: center; } body.public-page.is-message p { margin: 0 0 22px; color: var(--p-muted); } body.public-page.is-message p:last-child { margin-bottom: 0; } /* ========================================================================== 12. Responsive ========================================================================== */ @media (max-width: 680px) { body.public-page main { margin: 16px auto 40px; padding: 24px 20px 28px; } body.public-page h1 { font-size: 25px; } body.public-page .grid, body.public-page .meta { grid-template-columns: minmax(0, 1fr); } body.public-page .score-row { flex-wrap: wrap; gap: 12px; } /* L'echelle prend toute la largeur : cinq cases carrees et cliquables. */ body.public-page .scores { flex: 1 1 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); } body.public-page .actions { justify-content: stretch; } body.public-page .actions button, body.public-page .actions .button { width: 100%; } body.public-page .analytics-consent { display: grid; gap: 12px; padding: 14px; } body.public-page .analytics-consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } body.public-page .analytics-consent button { width: 100%; } } @media (max-width: 480px) { body.public-page main { width: calc(100% - 16px); padding: 22px 18px 26px; } /* Le logo passe devant le nom : meme lecture que sur le questionnaire. */ body.public-page .brand { flex-wrap: wrap; gap: 12px; align-items: flex-start; } body.public-page .brand img, body.public-page .brand-logo { order: -1; width: 46px; } body.public-page .lang-link { margin-left: 0; } body.public-page .cf-turnstile { transform: scale(0.86); transform-origin: top center; } body.public-page .captcha { min-height: 56px; } }