/* Heka QCM — brand palette (indigo + cream + mascot gold) */ :root { --bg: #fbf6eb; --bg-2: #ffffff; --ink: #1a1833; --ink-soft: #4a4668; /* WCAG AA ≥ 4.5:1 on --bg */ --muted: #5e5b72; /* WCAG AA ≥ 4.5:1 on --bg (was #8f8bab ≈ 3.5:1) */ --line: #ede3cf; --primary: #4a35d4; /* indigo logo Heka */ --primary-ink: #2d1b9e; --primary-soft: #e8e4ff; --primary-rgb: 74, 53, 212; /* pour les box-shadow rgba() qui suivent le thème */ --accent: #e4b861; /* gold mascot */ --accent-ink: #8a6716; --accent-soft: #faf0d9; --rose: #f5d7dc; --radius-lg: 20px; --radius-md: 14px; --shadow-sm: 0 2px 6px rgba(30, 20, 80, 0.05); --shadow-md: 0 10px 28px rgba(30, 20, 80, 0.10); --shadow-lg: 0 18px 48px rgba(30, 20, 80, 0.12); --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Fraunces', 'Inter', serif; } /* Thème « Senior Mutualiste » — palette coral reprise du logo. Activé via . Les autres verticales (agricole vert, comparaison-2/3 indigo) gardent la palette par défaut ci-dessus. */ body.theme-senior { /* Fond clair neutre (au lieu du crème chaud) : plus net pour des yeux de seniors, et le coral ressort mieux. Cartes blanches qui se détachent du fond. Tout le texte reste >= AA (lecture en --ink >= 8:1). */ --bg: #f3f5f8; /* gris très clair neutre — fond de page */ --bg-2: #ffffff; /* blanc — cartes, topbar, champs */ --line: #d7dfec; /* bordure froide légèrement bleutée */ /* Bleu médical (« bleu bic / médecin ») comme couleur principale. Toutes les paires fond/texte passent WCAG AA (bouton texte blanc 6.7:1, bleu texte 6.1:1, focus 7.4:1). Les titres restent en bleu marine --navy (>= 11:1). */ --primary: #1d4ed8; /* bleu royal médical — boutons (blanc 6.7:1) + texte (6.1:1) */ --primary-ink: #1746b8; /* hover — texte blanc 8:1 */ --primary-soft: #e6edfd; /* bleu très clair — fonds sélectionnés */ --primary-rgb: 29, 78, 216; --accent: #1746b8; /* anneau de focus — 7.4:1 sur fond clair */ --accent-ink: #1746b8; /* glyphe icône de choix — 6.9:1 sur accent-soft */ --accent-soft: #e6edfd; /* Skin « sérieux » : typo grotesque carrée (Archivo), géométrie carrée équilibrée, bleu marine structurel. Le coral reste l'accent (CTA/sélection). */ --font-display: 'Archivo', 'Inter', system-ui, sans-serif; --radius-md: 6px; --radius-lg: 8px; --navy: #16305c; /* bleu marine — titres, structure, progression */ --navy-soft: #e7edf6; } /* Titres en bleu marine + emphase coral ; boutons carrés ; progression marine. Scopé au thème senior, les autres verticales ne changent pas. */ body.theme-senior .qcm-title, body.theme-senior .qcm-hero-title, body.theme-senior .confirm-title, body.theme-senior .sms-title, body.theme-senior .savings-title { color: var(--navy); letter-spacing: -0.015em; } body.theme-senior .qcm-title em, body.theme-senior .qcm-hero-title em, body.theme-senior .confirm-title em { color: var(--primary); } body.theme-senior .qcm-eyebrow { color: var(--navy); } body.theme-senior .btn { border-radius: 6px; } body.theme-senior .qcm-progress-bar { background: var(--navy); } /* Hero médical : le questionnaire dans une carte blanche posée sur un fond bleu. */ body.theme-senior .form-hero { background: var(--navy, #16305c); padding: 26px 16px 40px; } body.theme-senior .qcm { background: var(--bg-2); max-width: 680px; border-radius: 18px; box-shadow: 0 18px 50px rgba(10, 25, 60, 0.28); padding: 30px 28px; min-height: 600px; /* hauteur stable : la carte ne rétrécit plus sur les étapes courtes */ } /* Le formulaire grandit pour remplir la carte → le bandeau sécurité reste collé en bas et la carte garde une taille constante d'une question à l'autre. */ body.theme-senior #qcmForm { flex: 1 0 auto; } @media (min-width: 760px) { body.theme-senior .qcm { min-height: 800px; } } /* Choix en tuiles gris très clair pour ressortir sur la carte blanche. */ body.theme-senior .choice-body { background: var(--bg); } body.theme-senior .choice input:checked ~ .choice-body { background: var(--primary-soft); } @media (max-width: 560px) { body.theme-senior .form-hero { padding: 16px 12px 28px; } body.theme-senior .qcm { padding: 22px 18px; border-radius: 14px; } } /* Hero d'accroche affiché au-dessus de la première question (page senior). */ .qcm-hero { text-align: center; margin: 4px 0 26px; } .qcm-hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4.6vw, 34px); line-height: 1.2; margin: 0 0 12px; color: var(--ink); } .qcm-hero-sub { color: var(--ink-soft); font-size: clamp(15px, 2.4vw, 18px); line-height: 1.5; margin: 0 auto; max-width: 560px; } /* Fresque décorative — ancrée en bas de la zone QCM (margin-top:auto) pour combler le vide au-dessus du footer. Illustration coral, ambiance sereine. */ /* Section « avantages » — cartes BLEU MARINE à icônes colorées + texte blanc, posées sur le fond clair standard du site (sous la carte du questionnaire). Affichée UNIQUEMENT sur la 1re question (body.is-first, posé par form.js). */ .advantages { display: none; max-width: 700px; margin: 46px auto; padding: 0 16px; min-width: 0; } body.is-first .advantages { display: block; } .advantages-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 3.6vw, 28px); letter-spacing: -0.01em; text-align: center; color: var(--navy, #16305c); margin: 0 0 26px; } .advantages-title em { color: var(--primary); font-style: normal; } .advantages-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .advantage { min-width: 0; background: var(--navy, #16305c); border-radius: var(--radius-lg); padding: 32px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; } .advantage-ic { width: 64px; height: 64px; margin-bottom: 18px; display: grid; place-items: center; } .advantage-ic svg { width: 64px; height: 64px; display: block; } .advantage-body { min-width: 0; } .advantage-h { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #ffffff; margin: 0 0 10px; line-height: 1.3; } .advantage-p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); } @media (max-width: 720px) { .advantages { margin: 32px auto; } .advantages-grid { grid-template-columns: 1fr; gap: 14px; } .advantage { padding: 28px 22px; } } /* Bandeau sécurité (icônes SVG) au-dessus du footer. */ .trust-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin: 24px auto 0; padding: 0 16px; color: var(--muted); font-size: 13px; font-weight: 500; } .trust-strip-item { display: inline-flex; align-items: center; gap: 7px; } .trust-strip-item svg { width: 17px; height: 17px; color: var(--primary); flex: 0 0 auto; } .trust-strip-item svg.flag-fr { width: 22px; height: 15px; } /* drapeau tricolore : ratio 3:2 */ .trust-strip-sep { width: 1px; height: 15px; background: var(--line); } @media (max-width: 420px) { .trust-strip-sep { display: none; } } /* Logo Senior Mutualiste — emblème SVG (recoloré au thème) + mot-symbole en vrai texte Archivo (typo nette), centré dans la barre du haut. */ body.theme-senior .topbar { justify-content: center; } body.theme-senior .brand-logo { height: 50px; width: auto; aspect-ratio: 1749 / 488; } @media (max-width: 420px) { body.theme-senior .brand-logo { height: 42px; } } .brand-emblem { height: 46px; width: auto; display: block; } .brand-name { font-family: 'Archivo', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 25px; letter-spacing: -0.01em; line-height: 1; color: var(--navy, #16305c); white-space: nowrap; } .brand-name strong { font-weight: 800; } body.theme-senior .brand { gap: 11px; } @media (max-width: 420px) { .brand-emblem { height: 40px; } .brand-name { font-size: 21px; } } * { box-sizing: border-box; } /* Radios/checkbox = overlays invisibles (opacity:0). Forcer 16px n'a aucun effet visuel mais évite tout déclenchement de zoom iOS au focus, par sécurité sur les navigateurs qui le feraient à tort. Les vrais champs de saisie sont déjà tous >= 16px (.field). */ input[type="radio"], input[type="checkbox"] { font-size: 16px; } /* The [hidden] UA rule is display:none, but class-level `display: flex` on .phone-form / .phone-form-actions overrides it. Force hidden precedence. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; overscroll-behavior-y: contain; /* Android: no pull-to-refresh */ -webkit-tap-highlight-color: transparent; /* iOS/Android: no blue flash */ } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 18px; line-height: 1.55; min-height: 100vh; min-height: 100dvh; /* iOS: account for dynamic address bar */ display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } a { color: var(--primary); } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 14px calc(24px + env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--bg-2); } .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); } .brand-logo { height: 36px; width: auto; display: block; } .topbar-help { color: var(--muted); font-size: 14px; } .topbar-help a { font-weight: 600; text-decoration: none; color: var(--primary); } /* QCM container */ .qcm { width: 100%; max-width: 700px; margin: 0 auto; padding: 24px; flex: 1; display: flex; flex-direction: column; min-width: 0; /* empêche un enfant à large viewBox (fresque SVG) de forcer la largeur */ } .qcm-progress { width: 100%; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 40px; } .qcm-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .4s ease; } /* Steps */ .qcm-step { display: none; animation: fadeUp .45s ease both; } .qcm-step.is-active { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .qcm-intro { text-align: center; padding-top: 20px; } .intro-mascot { display: block; width: 180px; height: 180px; margin: 0 auto 20px; filter: drop-shadow(0 10px 20px rgba(30, 20, 80, 0.15)); } .qcm-eyebrow { color: var(--primary); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; } .qcm-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 5vw, 38px); line-height: 1.18; margin: 0 0 14px; color: var(--ink); } .qcm-title em { color: var(--primary); font-style: normal; } .qcm-help { color: var(--ink-soft); margin: 0 0 22px; font-size: 17px; } .qcm-foot { color: var(--muted); font-size: 14px; margin-top: 18px; } /* Choices */ .choices { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 24px; } .choices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .choice { position: relative; cursor: pointer; } /* top/right/bottom/left en fallback : `inset` n'est pas supporté avant iOS 14.5. Sans ce fallback, l'input ne couvre pas toute la carte et seule une petite zone est cliquable sur les vieux iPhone. */ .choice input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; cursor: pointer; } .choice-body { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius-md); transition: border-color .2s, background .2s, transform .15s, box-shadow .2s; min-height: 68px; font-size: 17px; font-weight: 500; color: var(--ink); } @media (hover: hover) { .choice:hover .choice-body { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .choice:hover .choice-icon { background: var(--primary); color: #fff; } } .choice input:checked ~ .choice-body { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14); } .choice input:focus-visible ~ .choice-body { outline: 3px solid var(--accent); outline-offset: 2px; } /* Icons inside choices (SVG injected via data-icon) */ .choice-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--accent-soft); color: var(--accent-ink); border-radius: 12px; flex: 0 0 auto; transition: background .2s, color .2s; } .choice input:checked ~ .choice-body .choice-icon { background: var(--primary); color: #fff; } .choice-icon svg { display: block; } .choice-label { flex: 1; line-height: 1.3; } /* Levels picker (Min / Moyen / Fort / Max) */ .levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 24px; } .level { position: relative; cursor: pointer; } .level input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; cursor: pointer; } .level span { display: flex; align-items: center; justify-content: center; padding: 18px 10px; background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius-md); font-weight: 600; color: var(--ink); text-align: center; min-height: 64px; transition: all .2s ease; } @media (hover: hover) { .level:hover span { border-color: var(--primary); background: var(--primary-soft); } } .level input:checked ~ span { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .level input:focus-visible ~ span { outline: 3px solid var(--accent); outline-offset: 2px; } /* Fields */ .field { width: 100%; padding: 16px 18px; font-size: 18px; font-family: inherit; background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius-md); color: var(--ink); transition: border-color .2s, box-shadow .2s; margin-bottom: 12px; } .field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.16); } .field[aria-invalid="true"], .field.field--error { border-color: #d46a6a; box-shadow: 0 0 0 4px rgba(212, 106, 106, 0.15); } .field-error-msg { display: block; margin: -4px 0 10px; color: #b53a3a; font-size: 14px; font-weight: 500; } .field-year, .field-zip { font-size: 28px; font-weight: 600; text-align: center; max-width: 260px; letter-spacing: .05em; } /* Date row: JJ / MM / AAAA */ .date-row { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 12px; margin-bottom: 24px; max-width: 460px; } .date-field { display: flex; flex-direction: column; gap: 6px; } .date-field .field { text-align: center; font-size: 24px; font-weight: 600; letter-spacing: .04em; margin-bottom: 0; } .date-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); text-align: center; } textarea.field { font-family: inherit; resize: vertical; min-height: 100px; line-height: 1.5; } /* Combobox (autocomplete) */ .combo { position: relative; display: block; margin-bottom: 12px; } .combo-leading { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; z-index: 1; display: inline-grid; place-items: center; } .combo-input { padding-left: 50px; padding-right: 44px; } .combo[aria-expanded="true"] .combo-input { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.16); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .combo-clear { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 34px; height: 34px; display: inline-grid; place-items: center; border: none; background: var(--line); color: var(--ink-soft); border-radius: 50%; cursor: pointer; transition: background .2s; } .combo-clear:hover { background: var(--primary-soft); color: var(--primary-ink); } .combo-list { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; position: absolute; top: calc(100% - 2px); left: 0; right: 0; background: var(--bg-2); border: 2px solid var(--primary); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-md); z-index: 10; } .combo-item { padding: 12px 14px; border-radius: 10px; font-size: 16px; color: var(--ink); cursor: pointer; user-select: none; line-height: 1.3; min-height: 44px; display: flex; align-items: center; transition: background .12s; } .combo-item.is-active { background: var(--primary-soft); color: var(--primary-ink); } .combo-item:active { background: var(--primary); color: #fff; } .combo-item mark { background: transparent; color: var(--primary); font-weight: 700; } .combo-item.is-active mark { color: var(--primary-ink); } .combo-item-empty { color: var(--muted); font-style: italic; cursor: default; } .combo-item-empty:active { background: transparent; color: var(--muted); } /* Scroll bar pretty */ .combo-list::-webkit-scrollbar { width: 8px; } .combo-list::-webkit-scrollbar-track { background: transparent; } .combo-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .combo-list::-webkit-scrollbar-thumb:hover { background: var(--primary-soft); } /* Optin */ .optin { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius-md); margin: 10px 0; font-size: 14px; color: var(--ink-soft); cursor: pointer; line-height: 1.45; transition: border-color .2s, background .2s; } @media (hover: hover) { .optin:hover { border-color: var(--primary); } } .optin input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--primary); cursor: pointer; } .optin:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--ink); } .optin a { color: var(--primary); font-weight: 600; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; border: none; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s; min-height: 52px; } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } @media (hover: hover) { .btn-primary:hover { background: var(--primary-ink); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); } } .btn-primary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .btn-ghost { background: transparent; color: var(--ink-soft); border: 2px solid var(--line); } .btn-xl { padding: 18px 36px; font-size: 18px; min-height: 60px; } .qcm-nav { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; } .qcm-nav .btn-primary { margin-left: auto; } /* Loader */ .qcm-loader { text-align: center; padding-top: 20px; } .loader-mascot { width: 140px; height: 140px; margin: 0 auto 20px; display: block; animation: float 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(30, 20, 80, 0.15)); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .loader-dots { display: inline-flex; gap: 10px; margin: 0 auto 20px; } .loader-dots span { width: 12px; height: 12px; background: var(--primary); border-radius: 50%; animation: bounce 1.2s infinite ease-in-out; } .loader-dots span:nth-child(2) { background: var(--accent); animation-delay: .15s; } .loader-dots span:nth-child(3) { background: var(--primary-ink); animation-delay: .3s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } } .qcm-error { text-align: center; padding-top: 20px; } /* Shake for invalid group */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } } .shake { animation: shake .45s ease; } /* Confirm page (comparator OFF) */ .confirm { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px 48px; } .confirm-card { width: 100%; max-width: 720px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 44px 40px; box-shadow: var(--shadow-md); text-align: center; } .confirm-mascot { width: 150px; height: 150px; display: block; margin: -90px auto 14px; filter: drop-shadow(0 10px 20px rgba(30, 20, 80, 0.18)); } .confirm-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 4.5vw, 34px); line-height: 1.2; margin: 10px 0 14px; color: var(--ink); } .confirm-title em { color: var(--primary); font-style: normal; } .confirm-lead { color: var(--ink-soft); font-size: 17px; margin: 0 0 24px; line-height: 1.55; } .confirm-lead strong { color: var(--ink); } /* Savings emphasis block */ .savings { background: linear-gradient(135deg, var(--primary-soft) 0%, var(--accent-soft) 100%); border: 1px solid var(--primary); border-radius: var(--radius-md); padding: 22px 24px; margin: 8px 0 22px; text-align: center; } .savings-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--primary-ink); letter-spacing: 0.01em; } .savings-figure { display: inline-flex; align-items: baseline; gap: 12px; margin-bottom: 4px; } .savings-main { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 7vw, 58px); color: var(--primary-ink); line-height: 1; letter-spacing: -0.02em; } .savings-main small { font-size: 0.5em; font-weight: 600; color: var(--primary); margin-left: 4px; } .savings-unit { font-size: 16px; font-weight: 600; color: var(--ink); } .savings-sub { font-size: 15px; color: var(--ink-soft); margin-bottom: 10px; } .savings-sub strong { color: var(--primary-ink); } .savings-note { font-size: 13px; color: var(--ink-soft); margin: 0; } /* SMS block */ .sms-block { display: flex; align-items: flex-start; gap: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 18px; text-align: left; } .sms-icon { flex: 0 0 auto; width: 48px; height: 48px; display: inline-grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); border-radius: 12px; } .sms-body { flex: 1; } .sms-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--ink); } .sms-text { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; } .sms-text strong { color: var(--primary-ink); } /* Steps 1-2-3 (confirm page) */ .steps { list-style: none; padding: 0; margin: 4px 0 22px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .step { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); position: relative; } .step-num { flex: 0 0 auto; width: 36px; height: 36px; display: inline-grid; place-items: center; background: var(--primary); color: #fff; border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: 17px; box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3); } .step-body { flex: 1; min-width: 0; } .step-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); } .step-text { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; } .step-text strong { color: var(--ink); } /* Dimmed disclaimer on the confirm page */ .confirm-foot-dim { margin-top: 6px !important; font-size: 12px !important; opacity: 0.85; line-height: 1.55; max-width: 560px; margin-left: auto !important; margin-right: auto !important; } /* Phone re-check (confirm page) — compact inline: "SMS pas reçu ? [numéro]. [Modifier]" */ .phone-recheck { margin: 14px 0 18px; text-align: center; } .phone-recheck-inline { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.6; } .phone-recheck-inline strong { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; } .phone-edit-link { background: none; border: none; padding: 0; margin: 0 0 0 4px; font: inherit; font-weight: 600; color: var(--primary); text-decoration: underline; cursor: pointer; } .phone-edit-link:hover { color: var(--primary-ink); } .phone-edit-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* Inline field error message (under an invalid input in the QCM) */ .field-error { color: #b3261e; font-size: 14px; margin: -6px 0 12px; line-height: 1.4; } .phone-form { display: flex; flex-direction: column; gap: 10px; } .phone-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; } .phone-form .field { margin-bottom: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.05em; text-align: center; } .phone-form-actions { display: flex; gap: 10px; flex-wrap: wrap; } .phone-form-actions .btn { flex: 1; min-width: 140px; } .phone-error { color: #b3261e; font-size: 14px; margin: 4px 0 0; } .phone-success { margin: 12px 0 0; padding: 12px 16px; background: var(--primary-soft); color: var(--primary-ink); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; } .confirm-foot { color: var(--muted); font-size: 13px; margin: 0; } @media (max-width: 540px) { .confirm { padding: 16px; } .confirm-card { padding: 28px 20px; } .confirm-mascot { width: 120px; height: 120px; margin-top: -70px; } .sms-block { flex-direction: column; gap: 10px; padding: 16px; } .savings { padding: 18px; } } /* Legal */ .legal { text-align: center; color: var(--muted); font-size: 13px; padding: 18px 20px; border-top: 1px solid var(--line); background: var(--bg-2); line-height: 1.7; word-spacing: 2px; } .legal a { color: var(--muted); text-decoration: underline; white-space: nowrap; } .legal a:hover { color: var(--primary); } /* Responsive — keep 18px body for senior readability. Tighten spacing only. */ @media (max-width: 540px) { .qcm { padding: 16px; } .qcm-progress { margin-bottom: 20px; } .choice-body { padding: 14px 16px; min-height: 60px; font-size: 17px; } .choice-icon { width: 38px; height: 38px; } .btn { width: 100%; } .qcm-nav .btn-primary { margin-left: 0; } .qcm-nav { flex-direction: column-reverse; } .topbar-help { display: none; } .intro-mascot { width: 140px; height: 140px; } .levels { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Mini QCM (confirm page) — compact post-funnel feedback survey */ .mini-qcm { margin: 24px 0 18px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 13px; color: var(--ink-soft); } .mini-qcm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .mini-qcm-title { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .mini-qcm-progress { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; max-width: 140px; } .mini-qcm-progress-bar { height: 100%; width: 0; background: var(--primary); transition: width 0.25s ease; } .mini-q { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .mini-q-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; padding: 0; line-height: 1.35; } .mini-choice { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--bg); transition: border-color 0.15s, background 0.15s; font-size: 13.5px; line-height: 1.3; } .mini-choice:hover { border-color: var(--primary); } .mini-choice input[type="radio"] { accent-color: var(--primary); margin: 0; } .mini-choice input[type="radio"]:checked + span { color: var(--primary-ink); font-weight: 600; } .mini-choice:has(input[type="radio"]:checked) { border-color: var(--primary); background: var(--primary-soft); } .mini-input { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; font-family: inherit; background: var(--bg); color: var(--ink); width: 100%; } .mini-input:focus { outline: none; border-color: var(--primary); background: var(--bg-2); } .mini-textarea { resize: vertical; min-height: 70px; } .mini-score { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } .mini-score-btn { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 8px 0; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-soft); transition: border-color 0.15s, background 0.15s, color 0.15s; } .mini-score-btn:hover { border-color: var(--primary); } .mini-score-btn.is-selected { background: var(--primary); color: #fff; border-color: var(--primary); } .mini-q-actions { display: flex; justify-content: flex-end; margin-top: 4px; } .mini-btn { background: var(--primary); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .mini-btn:hover { background: var(--primary-ink); } .mini-btn-other { margin-top: 8px; align-self: flex-start; } .mini-q-info-text { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 500; } .mini-q-hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); font-style: italic; } .mini-q-note { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; } .mini-q-note p { margin: 0; font-size: 12.5px; color: var(--ink); line-height: 1.5; } .mini-q-note p + p { margin-top: 6px; } .mini-q-note strong { color: var(--accent-ink); } .mini-q-thanks { text-align: center; padding: 8px 0; color: var(--primary-ink); font-weight: 600; } .mini-error { color: #b3261e; font-size: 12.5px; margin: 4px 0 0; } @media (max-width: 540px) { .mini-score { grid-template-columns: repeat(5, 1fr); } } /* Exit-intent modal — fires once per session when desktop user moves cursor out of viewport top, or on mobile via timeout fallback. */ .exit-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; animation: exit-fade 0.2s ease; } .exit-modal-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(26, 24, 51, 0.55); -webkit-backdrop-filter: blur(2px); /* préfixe requis sur Safari iOS */ backdrop-filter: blur(2px); } .exit-modal-card { position: relative; background: var(--bg-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 22px 22px; max-width: 440px; width: 100%; font-family: var(--font-body); animation: exit-pop 0.25s ease; } .exit-modal-close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; } .exit-modal-close:hover { color: var(--ink); } .exit-modal-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; color: var(--ink); font-weight: 700; } .exit-modal-text { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; } .exit-modal-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .exit-choice { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .exit-choice:hover { border-color: var(--primary); } .exit-choice.is-selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; } .exit-modal-textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; background: var(--bg); color: var(--ink); resize: vertical; min-height: 60px; margin-bottom: 12px; } .exit-modal-textarea:focus { outline: none; border-color: var(--primary); background: var(--bg-2); } .exit-modal-send { width: 100%; padding: 12px 16px; font-size: 14.5px; } .exit-modal-thanks { margin: 12px 0 0; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--primary-ink); } @keyframes exit-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes exit-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Trust card on intro — social proof block */ .trust-card { margin: 28px auto 0; max-width: 520px; padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: left; } .trust-card-head { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); } .trust-score { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex-shrink: 0; } .trust-score-num { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--primary); line-height: 1; letter-spacing: -0.02em; } .trust-score-denom { font-size: 18px; color: var(--muted); font-weight: 600; margin-left: 2px; } .trust-stars { display: inline-flex; gap: 1px; font-size: 16px; color: var(--line); letter-spacing: 1px; } .trust-star.is-filled { color: var(--accent); } .trust-star.is-half { background: linear-gradient(90deg, var(--accent) 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .trust-meta { flex: 1; min-width: 0; } .trust-count { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.35; } .trust-count strong { color: var(--primary-ink); font-weight: 700; font-size: 17px; } .trust-meta-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); font-style: italic; } .trust-carousel { margin-top: 14px; position: relative; } .trust-quotes { list-style: none; padding: 0; margin: 0; position: relative; min-height: 110px; } .trust-quote { display: flex; gap: 12px; align-items: flex-start; animation: trust-fade 0.4s ease; } @keyframes trust-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .trust-quote-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; box-shadow: var(--shadow-sm); } .trust-quote-avatar-1 { background: linear-gradient(135deg, #4a35d4, #7c5cff); } .trust-quote-avatar-2 { background: linear-gradient(135deg, #e4b861, #c89337); } .trust-quote-avatar-3 { background: linear-gradient(135deg, #5e9aa8, #3d7a8c); } .trust-quote-avatar-4 { background: linear-gradient(135deg, #c66b8b, #9c4a6a); } .trust-quote-avatar-5 { background: linear-gradient(135deg, #6b8e5a, #4a6e3c); } .trust-quote-body { flex: 1; min-width: 0; } .trust-quote-text { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; font-style: italic; } .trust-quote-author { margin: 6px 0 0; font-size: 12.5px; color: var(--ink); font-weight: 600; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .trust-quote-partner { font-size: 9px; color: var(--muted); font-weight: 400; font-style: italic; text-transform: lowercase; letter-spacing: 0.02em; opacity: 0.8; } .trust-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; } .trust-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: background 0.2s, transform 0.2s, width 0.2s; } .trust-dot:hover { background: var(--muted); } .trust-dot.is-active { background: var(--primary); width: 18px; border-radius: 4px; } @media (max-width: 540px) { .trust-card { padding: 16px; margin-top: 22px; } .trust-card-head { gap: 14px; } .trust-score-num { font-size: 32px; } .trust-score-denom { font-size: 16px; } .trust-count { font-size: 14px; } .trust-quotes { min-height: 150px; } }