/* ========================================================================== Design Annatel — tokens repris du simulateur (simulateur.annatel.net) : rose #ec0a87, échelle d'encre, rayons 20px, ombres douces, police Manrope. Mobile first, LTR + RTL (propriétés logiques), mode sombre. ========================================================================== */ :root { /* --- couleurs de marque --- */ --rose: #ec0a87; --rose-dark: #c70873; --rose-soft: #fdeef6; /* --- encre & surfaces --- */ --ink: #111113; --ink-soft: #6b6b70; --ink-faint: #9a9aa0; --bg: #ffffff; --white: #1a1c22; /* redéfini en sombre : surface des cartes */ --surface: #ffffff; --surface-2: #fafafb; --line: #ececee; --line-soft: #f0f0f2; --line-strong: #dcdce1; /* --- états --- */ --ok: #0e9f6e; --ok-soft: #e9f8f1; --warn: #a4620a; --warn-soft: #fdf3e2; --danger: #d81b45; --danger-soft: #fdebef; /* --- formes & ombres --- */ --radius: 16px; --radius-sm: 12px; --radius-lg: 20px; --shadow: 0 1px 2px rgba(17,17,19,.03), 0 8px 24px rgba(17,17,19,.035); --shadow-hover:0 14px 40px rgba(17,17,19,.10); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --font: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', 'Noto Sans Hebrew', Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #0e1014; --surface: #1a1c22; --surface-2: #14161c; --ink: #f1f1f4; --ink-soft: #abacb5; --ink-faint: #74757e; --line: #2c2e37; --line-soft: #232530; --line-strong: #3b3e4a; --rose-soft: #2a1622; --ok-soft: #10291f; --warn-soft: #2e2410; --danger-soft: #2d1620; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.40); --shadow-hover:0 16px 44px rgba(0,0,0,.55); } } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } /* L'attribut `hidden` doit TOUJOURS gagner. Par défaut son display:none vient de la feuille du navigateur (priorité la plus faible) : n'importe quelle classe posant un `display` (ex. .demo-banner { display:flex }) le bat et l'élément réapparaît. Vu en prod : bandeau démo affiché malgré hidden=true. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; /* Pas de halo gris au tap : chaque contrôle a son propre état :active. */ -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; /* pas de rebond blanc en haut/bas */ /* Surtout pas d'overflow-x ici : cela ferait de un conteneur de défilement et casserait les barres `position: sticky`. */ } h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; } a { color: var(--rose); } ::selection { background: var(--rose); color: #fff; } .wrap { width: 100%; max-width: 720px; margin-inline: auto; /* env(safe-area-inset-*) : évite le rognage sous l'encoche en paysage. */ padding-inline: calc(var(--sp-4) + env(safe-area-inset-left)) calc(var(--sp-4) + env(safe-area-inset-right)); } /* --------------------------------------------------------- demo banner -- */ .demo-banner { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; padding: var(--sp-2) var(--sp-4); background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; text-align: center; } /* --------------------------------------------------------------- topbar -- */ .topbar { position: sticky; top: 0; z-index: 10; background: var(--bg); /* repli si color-mix n'est pas supporté */ background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-block-end: 1px solid var(--line); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 60px; } /* Logotype : « annatel » en minuscules + le point rose de la marque. */ .brand { display: flex; align-items: baseline; gap: 1px; min-width: 0; direction: ltr; /* le logotype ne se met jamais en miroir en hébreu */ font-size: 22px; font-weight: 800; letter-spacing: -.035em; text-transform: lowercase; } .brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__dot { color: var(--rose); } .langswitch { display: flex; gap: 2px; padding: 3px; background: var(--line-soft); border-radius: 999px; flex: none; } .langswitch__btn { min-width: 46px; min-height: 38px; /* + les 3px de padding du conteneur ≈ 44px de cible */ padding-inline: var(--sp-2); border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .langswitch__btn:active { transform: scale(.94); } .langswitch__btn[aria-pressed="true"] { background: var(--rose); color: #fff; } /* ----------------------------------------------------------------- hero -- */ .hero { padding-block: var(--sp-6) var(--sp-5); text-align: center; } .hero__title { margin-block-end: var(--sp-3); font-size: clamp(30px, 7.5vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; /* équilibre les lignes du titre au lieu d'une veuve isolée */ } .hero__subtitle { max-width: 34em; margin-inline: auto; color: var(--ink-soft); font-size: 16.5px; } .hero__subtitle strong { color: var(--ink); font-weight: 700; } .hero__points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); margin-block-start: var(--sp-5); font-size: 14.5px; font-weight: 600; } .hero__points li { display: flex; align-items: center; gap: 7px; } .tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 10px; font-weight: 700; flex: none; } /* ---------------------------------------------------------------- cards -- */ .card { margin-block-end: var(--sp-4); padding: var(--sp-5) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card__head { display: flex; gap: var(--sp-3); align-items: flex-start; margin-block-end: var(--sp-4); } .card__step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 14px; font-weight: 800; flex: none; } .card__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .card__title--center { text-align: center; } .card__hint { margin-block-start: 3px; color: var(--ink-soft); font-size: 14px; } .card__hint--warn { color: var(--warn); font-weight: 600; } /* --------------------------------------------------------------- fields -- */ .grid2 { display: grid; gap: var(--sp-4); } @media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } } .field label { display: block; margin-block-end: 6px; font-size: 14px; font-weight: 700; } .opt { color: var(--ink-faint); font-weight: 500; } .field input, .field textarea, input[type="date"] { width: 100%; min-height: 48px; padding: 12px var(--sp-4); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: 16px; /* évite le zoom automatique sur iOS */ } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field textarea { min-height: 88px; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible, button:focus-visible, .plan:focus-within, .checkbox:focus-within { outline: 2px solid var(--rose); outline-offset: 2px; } .field input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); } .field__error { margin-block-start: 6px; color: var(--danger); font-size: 13px; font-weight: 600; } .honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- lines -- */ .line { padding: var(--sp-4); margin-block-end: var(--sp-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); } .line__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-3); } .line__label { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .line__remove { padding: 8px 14px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--danger); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } @media (hover: hover) { .line__remove:hover { border-color: var(--danger); background: var(--danger-soft); } } .line__subtitle { margin-block: var(--sp-4) var(--sp-2); font-size: 14px; font-weight: 700; } .field__hint { margin-block-start: 6px; color: var(--ink-faint); font-size: 12.5px; } /* ------------------------------------------- bouton « ajouter une ligne » -- Carte à ajouter : pointillé rose, pleine largeur, gros +. Suit la dernière ligne. Le pointillé signale « emplacement pour un élément de plus » — un pattern reconnu, bien plus lisible qu'un bouton fantôme. */ .addline { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 64px; padding: var(--sp-3) var(--sp-4); background: var(--rose-soft); border: 2px dashed var(--rose); border-radius: var(--radius); color: var(--rose); font: inherit; text-align: start; cursor: pointer; transition: background .15s, transform .1s; } .addline__plus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 24px; font-weight: 700; line-height: 1; flex: none; } .addline__text { display: flex; flex-direction: column; min-width: 0; } .addline__label { font-size: 15.5px; font-weight: 800; } .addline__hint { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); } .addline:active:not(:disabled) { transform: scale(.99); } .addline:disabled { opacity: .45; cursor: not-allowed; } @media (hover: hover) { .addline:hover:not(:disabled) { background: var(--rose); color: #fff; } .addline:hover:not(:disabled) .addline__hint { color: rgba(255,255,255,.85); } .addline:hover:not(:disabled) .addline__plus { background: #fff; color: var(--rose); } } /* ------------------------------ forfaits dévoilés après le numéro ------ */ .line__prompt { margin-block-start: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-faint); font-size: 13.5px; text-align: center; } .line__choices.is-revealed { animation: reveal .28s ease-out; } @keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ----------------------------------------------------------- plan cards -- */ .plans { display: grid; gap: 14px; } /* > 10px : laisse la place au badge « Le plus choisi » */ .plan { position: relative; display: block; padding: var(--sp-4); background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, box-shadow .15s; } @media (hover: hover) { .plan:hover { box-shadow: var(--shadow); } } .plan:active { transform: scale(.99); } .plan input { position: absolute; opacity: 0; pointer-events: none; } .plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .plan__name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; } .plan__price { font-weight: 800; font-size: 17px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; } .plan__per { color: var(--ink-faint); font-size: 12.5px; font-weight: 600; } /* Tarif pack sur la carte : catalogue barré, prix réel en rose. */ .plan__was { color: var(--ink-faint); font-weight: 500; font-size: 14px; text-decoration-thickness: 1px; } .plan--pack .plan__now { color: var(--rose); } .plan__packtag { display: inline-block; margin-block-start: 6px; padding: 2px 9px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; } .plan__packhint { display: block; margin-block-start: 6px; color: var(--rose); font-size: 12.5px; font-weight: 700; } .plan__features { margin-block-start: var(--sp-3); display: grid; gap: 5px; color: var(--ink-soft); font-size: 13.5px; } .plan__features li { display: flex; gap: 8px; align-items: flex-start; } .plan__features li::before { content: ""; width: 5px; height: 5px; margin-block-start: 8px; border-radius: 50%; background: var(--rose); flex: none; } .plan__flag { position: absolute; inset-block-start: -11px; inset-inline-end: var(--sp-4); padding: 3px 11px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; } .plan:has(input:checked), .plan.is-selected { border-color: var(--rose); background: var(--rose-soft); } .plan:has(input:checked) .plan__features, .plan.is-selected .plan__features { color: var(--ink); } /* ------------------------------------------------------------- checkbox -- */ .checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 12px var(--sp-4); min-height: 48px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14.5px; cursor: pointer; } .checkbox + .checkbox { margin-block-start: var(--sp-2); } .checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rose); flex: none; } .checkbox__label { flex: 1; } .checkbox__price { font-weight: 800; white-space: nowrap; } .checkbox--consent { margin-block-start: var(--sp-4); background: var(--surface-2); } .options { display: grid; } /* ---------------------------------------------------------------- recap -- */ .recap { padding: var(--sp-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); } .recap__line + .recap__line { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--line); } .recap__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 14.5px; } /* Le montant ne se coupe jamais et n'est pas compressé par un libellé long. */ .recap__name { min-width: 0; } .recap__amount { flex: none; white-space: nowrap; /* Les montants ne contiennent que des chiffres et ₪ : on les garde en lecture gauche→droite même en hébreu, sinon le prix barré et le prix pack se réordonnent et deviennent indistinguables. */ direction: ltr; unicode-bidi: isolate; } .recap__row--head { font-weight: 800; } .recap__row--opt { color: var(--ink-soft); font-size: 13.5px; } .recap__row--opt .recap__name { padding-inline-start: var(--sp-3); } .recap__muted { color: var(--ink-faint); font-style: italic; } .recap__total { display: flex; justify-content: space-between; gap: var(--sp-3); margin-block-start: var(--sp-4); padding-block-start: var(--sp-3); border-block-start: 2px solid var(--line-strong); font-size: 18px; font-weight: 800; } .recap__total .recap__amount { color: var(--rose); } /* Prix catalogue barré, à côté du tarif pack. */ .recap__was { margin-inline-end: 6px; color: var(--ink-faint); font-weight: 500; text-decoration-thickness: 1px; } .recap__row--pack { color: var(--rose); font-weight: 700; } /* Bandeau « pack appliqué » / rappel de la condition. */ .packnote { display: flex; gap: 7px; align-items: flex-start; margin-block-start: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--line-soft); color: var(--ink-soft); font-size: 13px; } .packnote--on { background: var(--rose-soft); color: var(--rose); font-weight: 700; } .packnote__tick { flex: none; font-weight: 800; } .recap__disclaimer { margin-block-start: var(--sp-2); color: var(--ink-faint); font-size: 12.5px; } /* -------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: 12px var(--sp-5); border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; transition: background .15s, box-shadow .15s; } .btn--block { width: 100%; } .btn--lg { min-height: 56px; font-size: 17px; } .btn--primary { background: var(--rose); color: #fff; } .btn--primary:disabled { opacity: .6; cursor: progress; box-shadow: none; } .btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--rose); } .btn--ghost:disabled { opacity: .5; cursor: not-allowed; background: transparent; border-color: var(--line-strong); } @media (hover: hover) { .btn--primary:hover { background: var(--rose-dark); box-shadow: var(--shadow-hover); } .btn--ghost:hover { background: var(--rose-soft); border-color: var(--rose); } } /* Retour tactile immédiat, à la place du survol qui n'existe pas au doigt. */ .btn:active:not(:disabled) { transform: scale(.98); } .checkbox:active { background: var(--line-soft); } /* ---------------------------------------------------- barre d'action --- */ /* `sticky` et non `fixed` : le clavier iOS ne la fait pas sauter, et elle se pose naturellement en fin de formulaire au lieu de flotter par-dessus. */ .actionbar { position: sticky; bottom: 0; z-index: 9; display: flex; align-items: center; gap: var(--sp-3); margin-inline: calc(var(--sp-4) * -1); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: var(--bg); /* repli si color-mix n'est pas supporté */ background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-block-start: 1px solid var(--line); } .actionbar__total { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .actionbar__label { color: var(--ink-soft); font-size: 11.5px; font-weight: 600; } .actionbar__amount { color: var(--rose); font-size: 19px; font-weight: 800; white-space: nowrap; direction: ltr; unicode-bidi: isolate; } .actionbar .btn { flex: 1; min-width: 0; padding-inline: var(--sp-4); } /* --------------------------------------------------------------- alerts -- */ .alert { margin-block: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: 14.5px; } .alert--error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); } .alert--warn { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn); font-weight: 600; text-align: start; } .alert ul { margin-block-start: var(--sp-2); display: grid; gap: 4px; } .alert li { display: flex; gap: 7px; } .alert li::before { content: "•"; flex: none; } /* -------------------------------------------------------------- succès -- */ .card--success { text-align: center; } .success__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--sp-4); border-radius: 50%; background: var(--rose-soft); color: var(--rose); } .success__ref { margin-block: var(--sp-2) 0; font-size: 14px; font-weight: 700; color: var(--rose); } .success__text { margin-block: var(--sp-3) var(--sp-5); color: var(--ink-soft); } .success__recapTitle { margin-block-end: var(--sp-3); font-size: 15px; font-weight: 800; text-align: start; } .card--success .recap { text-align: start; } .success__support { margin-block: var(--sp-5) var(--sp-4); font-size: 14.5px; color: var(--ink-soft); } /* Liens de support : icône + numéro, cible tactile confortable au doigt. */ .supportlink { display: inline-flex; align-items: center; gap: 6px; padding-block: 12px; padding-inline: 4px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; } .supportlink svg { flex: none; } /* Le glyphe WhatsApp garde sa couleur de marque : reconnaissable d'un coup d'œil. */ .supportlink--whatsapp svg { color: #25d366; } /* Le numéro reste lisible de gauche à droite en hébreu. */ .supportlink span { direction: ltr; unicode-bidi: isolate; white-space: nowrap; } /* -------------------------------------------------------------- footer -- */ .footer { padding-block: var(--sp-6) calc(var(--sp-7) + env(safe-area-inset-bottom)); color: var(--ink-faint); font-size: 13px; text-align: center; } .footer p + p { margin-block-start: var(--sp-2); } /* ------------------------------------------------------------------ RTL -- */ [dir="rtl"] .line__label { letter-spacing: normal; } /* Numéros et e-mails restent lisibles de gauche à droite en hébreu */ [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: start; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }