/* ========================================================================== LA MICRO BY FLO — Couche « Outils » Composants spécifiques aux simulateurs, quiz et questionnaires embarqués en iframe sur lamicrobyflo.fr. RÈGLES : - Ce fichier s'appuie EXCLUSIVEMENT sur les tokens de design-system/colors_and_type.css (var(--...)). Jamais de couleur en dur. - Toujours charger colors_and_type.css AVANT ce fichier. - Un outil = + un conteneur .lmf-outil. ========================================================================== */ /* ---- Cadre général d'un outil embarqué ---- */ /* Le body prend le canvas bleu de la marque : dans l'iframe, l'outil apparaît comme un bloc bleu, identique aux sections du site. */ .lmf-outil-body { margin: 0; padding: var(--sp-5); min-height: 0; } .lmf-outil { max-width: 720px; margin: 0 auto; } /* En-tête de l'outil (titre + sous-titre courts, sur fond bleu) */ .lmf-outil__header { text-align: center; margin-bottom: var(--sp-5); } .lmf-outil__header h1 { font-size: var(--fs-h2); /* un outil embarqué n'a pas besoin d'un H1 géant */ color: var(--fg-on-blue); } .lmf-outil__header p { margin: 0 auto; color: var(--fg-on-blue); opacity: 0.92; } /* ---- Panneau principal (la carte blanche qui porte l'outil) ---- */ .lmf-outil__panel { background: var(--surface); color: var(--fg-on-card); border: var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-hard); padding: var(--sp-6); } @media (max-width: 560px) { .lmf-outil-body { padding: var(--sp-4); } .lmf-outil__panel { padding: var(--sp-5); } } /* ---- Barre de progression (quiz multi-étapes) ---- */ .lmf-progress { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); } .lmf-progress__track { flex: 1; height: 12px; background: var(--grey-050); border: var(--border); border-radius: var(--r-pill); overflow: hidden; } .lmf-progress__fill { height: 100%; background: var(--blue); border-radius: var(--r-pill); transition: width calc(var(--dur) * 2) var(--ease); } .lmf-progress__label { font-size: var(--fs-small); font-weight: var(--w-bold); color: var(--ink-muted); white-space: nowrap; } /* ---- Champs de formulaire ---- */ .lmf-field { margin-bottom: var(--sp-5); } .lmf-field__label { display: block; font-weight: var(--w-bold); font-size: var(--fs-body); color: var(--ink); margin-bottom: var(--sp-2); } .lmf-field__help { font-size: var(--fs-small); color: var(--ink-muted); margin-top: var(--sp-2); } /* Select stylé comme les inputs de la marque */ .lmf-select { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--w-medium); color: var(--navy); background: var(--white); border: var(--border); border-radius: var(--r-sm); padding: 13px 44px 13px 16px; width: 100%; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23192152' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .lmf-select:focus { outline: 3px solid var(--blue-300); outline-offset: 1px; } /* Suffixe d'unité (€, %, parts) accolé à un input */ .lmf-input-group { position: relative; } .lmf-input-group .lmf-input { padding-right: 48px; } .lmf-input-group__suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: var(--w-bold); color: var(--ink-muted); pointer-events: none; } /* ---- Options de réponse (quiz : boutons-cartes cliquables) ---- */ .lmf-options { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); } .lmf-option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--w-medium); color: var(--ink); background: var(--white); border: var(--border); border-radius: var(--r-md); padding: 15px 18px; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .lmf-option:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-hard); } .lmf-option:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 1px; } .lmf-option[aria-pressed="true"], .lmf-option.is-selected { background: var(--yellow); box-shadow: var(--shadow-hard); font-weight: var(--w-bold); } .lmf-option__emoji { font-size: 22px; line-height: 1; } /* ---- Carte de résultat ---- */ .lmf-result { border: var(--border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-5); } .lmf-result--ok { background: var(--yellow); box-shadow: var(--shadow-hard); } .lmf-result--ko { background: var(--grey-050); box-shadow: var(--shadow-hard); } .lmf-result__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h4); font-weight: var(--w-extra); color: var(--ink); margin: 0 0 var(--sp-2); } .lmf-result__body { color: var(--ink); } .lmf-result__body p { margin: 0 0 0.7em; max-width: none; } .lmf-result__body p:last-child { margin-bottom: 0; } /* Détail du calcul (transparence du simulateur) */ .lmf-calc { background: var(--blue-050); border: var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink); } .lmf-calc strong { font-weight: var(--w-extra); } /* ---- Encadré « Mon conseil » (repris de l'éditorial du site) ---- */ .lmf-conseil { background: var(--yellow); border: var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4); color: var(--ink); font-size: var(--fs-small); } .lmf-conseil strong { font-weight: var(--w-extra); } /* ---- Note de bas d'outil (disclaimer + date des chiffres) ---- */ .lmf-outil__footnote { text-align: center; font-size: 13px; color: var(--fg-on-blue); opacity: 0.8; margin-top: var(--sp-4); } .lmf-outil__footnote a { color: inherit; } /* ---- Boutons d'action de l'outil ---- */ .lmf-outil__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); } /* ---- Statuts de conformité (badges de verdict des quiz) ---- Tokens absents de colors_and_type.css (la marque n'a pas de vert/rouge) : ajoutés ici, conformément à la règle 3 du CLAUDE.md. */ :root { --statut-ok: #166534; /* texte « conforme » + coche verte */ --statut-ok-bg: #dcfce7; --statut-alerte: #b91c1c; /* texte « pas conforme » */ --statut-alerte-bg: #fee2e2; --statut-info-bg: #e8edfc; /* fond du badge bleu « concerné·e » */ --erreur: #B00020; /* message d'erreur de formulaire */ } /* ---- Accessibilité : mouvement réduit ---- */ @media (prefers-reduced-motion: reduce) { .lmf-progress__fill, .lmf-option, .lmf-btn { transition: none; } }