/* ========================================================================== Univerre — Diagnostic en ligne Brand: marine blue · pearl · champagne accent (Monaco, à la nuit tombante) ========================================================================== */ /* ---- Self-hosted fonts (RGPD: no Google hot-linking) -------------------- */ @font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap; src:url('../fonts/cormorant-300.woff2') format('woff2');} @font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/cormorant-400.woff2') format('woff2');} @font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/cormorant-500.woff2') format('woff2');} @font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap; src:url('../fonts/cormorant-400-italic.woff2') format('woff2');} @font-face{font-family:'InterUv';font-style:normal;font-weight:300;font-display:swap; src:url('../fonts/inter-300.woff2') format('woff2');} @font-face{font-family:'InterUv';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2');} @font-face{font-family:'JetBrainsMonoUv';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/jetbrainsmono-400.woff2') format('woff2');} @font-face{font-family:'JetBrainsMonoUv';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/jetbrainsmono-500.woff2') format('woff2');} /* ---- Tokens ------------------------------------------------------------- */ :root{ --abysse:#040E1F; --marine:#092E62; --azur:#1B5396; --brume:#A8B4C7; --champagne:#C9A961; --ormolu:#7A6431; --os:#E8E2D5; --perle:#F4F1EA; --gradient-marque:linear-gradient(180deg,#040E1F 0%,#092E62 100%); --serif:'Cormorant',Georgia,'Times New Roman',serif; --sans:'InterUv',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --mono:'JetBrainsMonoUv','SF Mono',Menlo,Consolas,monospace; --card:rgba(15,42,82,.42); --card-border:rgba(168,180,199,.14); --glass-blur:saturate(120%) blur(8px); --radius:14px; --maxw:560px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;} /* Abysse base on so no area can ever show white (iOS/short-page safe). */ html{-webkit-text-size-adjust:100%;background:var(--abysse);height:100%;} /* Tool, not a page: lock to the viewport, never scroll the document itself. */ body{ font-family:var(--sans); font-weight:300; color:var(--perle); background-color:var(--abysse); background-image: radial-gradient(120% 80% at 50% -10%, rgba(27,83,150,.30) 0%, rgba(27,83,150,0) 55%), linear-gradient(180deg,#040E1F 0%,#05182f 55%,#092E62 160%); background-repeat:no-repeat; background-size:100% 100%; height:100vh; height:100dvh; overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6; } a{color:var(--azur);text-decoration:none;border-bottom:1px solid rgba(27,83,150,.5);} a:hover{color:var(--champagne);border-color:var(--champagne);} img{max-width:100%;display:block;} button{font-family:inherit;} :focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:6px;} /* ---- App shell ---------------------------------------------------------- */ .app{ max-width:var(--maxw); margin:0 auto; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; padding:0 22px env(safe-area-inset-bottom,14px); } /* Top bar: back · brand · spacer */ .topbar{ flex:0 0 auto; z-index:10; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; padding:14px 0 10px; } .brand{display:flex; justify-content:center;} .brand__logo{height:30px; width:auto; opacity:.96;} .iconbtn{ width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:none;border:0;color:var(--brume);cursor:pointer;border-radius:50%; transition:color .2s,background .2s,opacity .2s; } .iconbtn:hover{color:var(--perle);background:rgba(168,180,199,.08);} .iconbtn svg{width:22px;height:22px;} .iconbtn[hidden]{visibility:hidden;} /* Progress bar */ .progress{height:2px;background:rgba(168,180,199,.16);border-radius:2px;overflow:hidden;margin-bottom:4px;} .progress__bar{ height:100%;width:0;border-radius:2px; background:linear-gradient(90deg,var(--ormolu),var(--champagne)); transition:width .45s var(--ease); } /* Stage / screens — each screen fills the viewport; only the options/form region scrolls internally if a screen is taller than the device. */ .stage{flex:1;min-height:0;display:flex;flex-direction:column;} .screen{flex:1;min-height:0;display:flex;flex-direction:column;padding:6px 0 10px;} .screen__head{flex:0 0 auto;} @media (min-width:600px) and (min-height:880px){ .screen{padding-top:16px;} } .screen--enter{animation:screenIn .36s var(--ease) both;} .screen--enter.is-back{animation:screenInBack .36s var(--ease) both;} @keyframes screenIn{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:none;}} @keyframes screenInBack{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:none;}} /* ---- Typography blocks -------------------------------------------------- */ .eyebrow{ font-family:var(--mono); font-weight:400; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--champagne); margin:0 0 18px; } .question{ font-family:var(--serif); font-weight:300; letter-spacing:-.015em; font-size:clamp(28px,5.6vw,40px); line-height:1.12; color:var(--perle); margin:0 0 6px; } .question em{font-style:italic;color:var(--champagne);} .lede{font-size:15.5px;line-height:1.55;color:var(--brume);margin:8px 0 0;max-width:44ch;} .note{font-size:14px;line-height:1.5;color:var(--brume);margin:10px 0 0;} .note--field{margin:-6px 0 14px;} /* ---- Option cards ------------------------------------------------------- */ .options{ display:flex; flex-direction:column; gap:9px; margin-top:13px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px 2px; } .options::-webkit-scrollbar{display:none;} .option{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:13px 16px; border-radius:var(--radius); cursor:pointer; background:var(--card); border:1px solid var(--card-border); color:var(--perle); backdrop-filter:var(--glass-blur); flex:0 0 auto; transition:border-color .2s,box-shadow .25s,transform .15s,background .2s; } .option:hover{ border-color:rgba(201,169,97,.55); box-shadow:0 0 0 1px rgba(201,169,97,.25), 0 10px 30px -14px rgba(201,169,97,.45); transform:translateY(-2px); } .option:active{transform:translateY(0);} .option.is-selected{ border-color:var(--champagne); background:linear-gradient(180deg,rgba(201,169,97,.14),rgba(201,169,97,.06)); box-shadow:0 0 0 1px rgba(201,169,97,.6), 0 14px 34px -16px rgba(201,169,97,.5); } .option__icon{ flex:0 0 auto;width:36px;height:36px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:rgba(168,180,199,.07);border:1px solid var(--card-border); color:var(--champagne); transition:color .2s,border-color .2s,background .2s; } .option__icon svg{width:20px;height:20px;stroke-width:1.5;} .option:hover .option__icon,.option.is-selected .option__icon{ border-color:rgba(201,169,97,.4);background:rgba(201,169,97,.1); } .option__text{flex:1;min-width:0;} .option__label{display:block;font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.005em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .option__caption{display:block;font-weight:300;font-size:13px;line-height:1.35;color:var(--brume);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .option__check{ flex:0 0 auto;width:22px;height:22px;border-radius:50%; border:1.5px solid var(--card-border);display:flex;align-items:center;justify-content:center; color:var(--abysse);opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s,background .2s,border-color .2s; } .option__check svg{width:13px;height:13px;} .option.is-selected .option__check{opacity:1;transform:scale(1);background:var(--champagne);border-color:var(--champagne);} /* multi-select uses a square check affordance always visible */ .options--multi .option__check{opacity:1;transform:none;border-radius:7px;} .options--multi .option:not(.is-selected) .option__check{color:transparent;} /* "Autre" free-text reveal */ .other-field{margin-top:4px;} .other-field[hidden]{display:none;} .other-field input{margin-top:2px;} /* ---- Form fields -------------------------------------------------------- */ .form{margin-top:14px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;} /* Fields scroll; the submit button stays pinned at the bottom. */ .form__fields{ display:flex;flex-direction:column;gap:11px;flex:1 1 auto;min-height:0; overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding:2px 2px; } .form__fields::-webkit-scrollbar{display:none;} .field{display:flex;flex-direction:column;gap:6px;} .field__label{font-family:var(--sans);font-weight:500;font-size:13.5px;letter-spacing:.02em;color:var(--os);} .field__label .opt{color:var(--brume);font-weight:300;} .req{color:var(--champagne);} input[type=text],input[type=email],input[type=tel],textarea{ width:100%;font-family:var(--sans);font-weight:300;font-size:16px;color:var(--perle); background:rgba(8,22,44,.55);border:1px solid var(--card-border);border-radius:11px; padding:11px 14px;transition:border-color .2s,box-shadow .2s,background .2s; } input::placeholder,textarea::placeholder{color:rgba(168,180,199,.55);} input:focus,textarea:focus{ outline:none;border-color:rgba(201,169,97,.6);background:rgba(8,22,44,.8); box-shadow:0 0 0 3px rgba(201,169,97,.14); } textarea{resize:vertical;min-height:56px;line-height:1.45;} .field--invalid input,.field--invalid textarea{border-color:#c2566a;box-shadow:0 0 0 3px rgba(194,86,106,.16);} .field__error{font-size:12.5px;color:#e08a98;display:none;} .field--invalid .field__error{display:block;} /* Consent */ .consent{display:flex;gap:12px;align-items:flex-start;margin-top:4px;cursor:pointer;} .consent input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;margin:1px 0 0; border:1.5px solid var(--card-border);border-radius:6px;background:rgba(8,22,44,.55);cursor:pointer; display:grid;place-content:center;transition:background .2s,border-color .2s;} .consent input::before{content:"";width:11px;height:11px;clip-path:polygon(14% 47%,0 60%,40% 100%,100% 18%,86% 5%,38% 71%); transform:scale(0);transition:transform .15s;background:var(--abysse);} .consent input:checked{background:var(--champagne);border-color:var(--champagne);} .consent input:checked::before{transform:scale(1);} .consent__text{font-size:13.5px;line-height:1.5;color:var(--brume);} .field--invalid.consent .consent__text{color:#e08a98;} /* ---- Buttons / actions -------------------------------------------------- */ .actions{flex:0 0 auto;margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:10px;} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase; padding:16px 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;width:100%; transition:transform .15s,box-shadow .25s,background .2s,border-color .2s,opacity .2s; } .btn svg{width:18px;height:18px;flex:0 0 auto;stroke-width:1.6;} .btn--primary{background:var(--champagne);color:var(--abysse);box-shadow:0 12px 30px -14px rgba(201,169,97,.7);} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(201,169,97,.85);} .btn--primary:active{transform:translateY(0);} .btn--ghost{background:transparent;color:var(--perle);border-color:rgba(168,180,199,.32);} .btn--ghost:hover{border-color:var(--perle);color:var(--perle);} .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;} .btn__spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(4,14,31,.35);border-top-color:var(--abysse); animation:spin .7s linear infinite;display:none;} .btn.is-loading .btn__spinner{display:inline-block;} .btn.is-loading .btn__label{opacity:.7;} @keyframes spin{to{transform:rotate(360deg);}} /* ---- Reveal (solution) screen ------------------------------------------ */ .reveal{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0;} .reveal__seal{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 35%,rgba(201,169,97,.28),rgba(201,169,97,.05)); border:1px solid rgba(201,169,97,.45);color:var(--champagne);margin-bottom:24px; box-shadow:0 0 40px -10px rgba(201,169,97,.5);} .reveal__seal svg{width:30px;height:30px;stroke-width:1.4;} .reveal__title{font-family:var(--serif);font-weight:300;font-size:clamp(32px,7vw,50px);line-height:1.12; letter-spacing:-.015em;margin:0 0 14px;color:var(--perle);} .reveal__body{font-size:17px;line-height:1.75;color:var(--brume);max-width:40ch;} /* ---- Confirmation ------------------------------------------------------- */ .confirm{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;padding:30px 0;} .confirm__seal{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 35%,rgba(201,169,97,.3),rgba(201,169,97,.05)); border:1px solid rgba(201,169,97,.5);color:var(--champagne);margin-bottom:26px; box-shadow:0 0 50px -10px rgba(201,169,97,.55);animation:sealPop .5s var(--ease) both;} .confirm__seal svg{width:36px;height:36px;stroke-width:1.4;} @keyframes sealPop{from{opacity:0;transform:scale(.8);}to{opacity:1;transform:none;}} .confirm__title{font-family:var(--serif);font-weight:300;font-size:clamp(30px,6.5vw,46px);line-height:1.14; letter-spacing:-.015em;margin:0 0 14px;color:var(--perle);} .confirm__sub{font-size:17px;line-height:1.7;color:var(--brume);max-width:38ch;} .confirm__ref{font-family:var(--mono);font-size:14px;letter-spacing:.18em;color:var(--champagne); margin-top:24px;padding:10px 18px;border:1px solid rgba(201,169,97,.3);border-radius:10px;} .confirm__urgent{margin-top:26px;font-size:14px;color:var(--brume);line-height:1.5;display:flex; flex-direction:column;align-items:center;gap:8px;} .confirm__urgent a{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(201,169,97,.4); border-radius:999px;padding:9px 18px;color:var(--champagne);font-weight:500;letter-spacing:.01em; transition:border-color .2s,background .2s,color .2s;} .confirm__urgent a:hover{border-color:var(--champagne);background:rgba(201,169,97,.1);color:var(--perle);} .confirm__urgent a svg{width:16px;height:16px;} .confirm__link{margin-top:24px;} /* ---- Inline error banner ------------------------------------------------ */ .banner{display:none;margin-top:18px;padding:13px 16px;border-radius:11px;font-size:14px;line-height:1.5; background:rgba(194,86,106,.12);border:1px solid rgba(194,86,106,.4);color:#f0b9c2;} .banner.is-on{display:block;} /* ---- Footer ------------------------------------------------------------- */ .foot{flex:0 0 auto;font-size:11px;letter-spacing:.04em;color:rgba(168,180,199,.45);text-align:center; padding:8px 0 4px;font-family:var(--sans);font-weight:300;} .foot a{color:rgba(168,180,199,.7);border:0;} .foot a:hover{color:var(--champagne);} /* ---- noscript ----------------------------------------------------------- */ .noscript{max-width:var(--maxw);margin:60px auto;padding:0 24px;text-align:center;} .noscript h1{font-family:var(--serif);font-weight:300;font-size:32px;} /* ---- Reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important; scroll-behavior:auto !important;} .progress__bar{transition:width .2s linear;} }