/*
 * Funnel UX components (original Pluton stylesheet), loaded after funnel_v2.css on every online quotation wizard:
 * searchable list picker, segmented date field, help notes, waiting page, opt-in boxes, habitation-interest choice,
 * round back / add-driver actions, licence card (driver, bonus-malus, claims and incidents). Scoped under <body class="fv2">,
 * so tempo_online and the shared tempo_*.css files are never affected.
 */

/* ---------- Native fields kept in the form but hidden from sight (they still validate, still post) ---------- */
body.fv2 .online-quotation .fv-native,body.fv2 .fv-native{position:absolute!important;left:0!important;bottom:0!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;box-shadow:none!important}

/* ---------- Picker: a field that opens a sheet (tap a choice, or type to filter) ---------- */
body.fv2 .fv-picker{position:relative;display:block;width:100%}
body.fv2 .fv-picker[hidden]{display:none}
body.fv2 .fv-picker__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:48px;padding:0 14px 0 16px;border:1px solid var(--fv2-line);border-radius:var(--fv2-radius);background:#fff;color:var(--fv2-ink);font:inherit;font-size:16px;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
body.fv2 .fv-picker__btn:hover{border-color:var(--fv2-accent)}
body.fv2 .fv-picker__btn:focus-visible,body.fv2 .fv-picker__btn[aria-expanded=true]{outline:0;border-color:var(--fv2-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--fv2-accent) 16%,transparent)}
body.fv2 .fv-picker__btn.is-placeholder{color:#a592a1}
body.fv2 .fv-picker__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.fv2 .fv-picker__btn svg{flex:0 0 auto;color:var(--fv2-muted)}
body.fv2 .fv-picker--error .fv-picker__btn{border-color:var(--fv2-danger);background:#fffafa}
body.fv2 .fv-picker--disabled .fv-picker__btn{background:var(--fv2-soft);color:var(--fv2-off);cursor:not-allowed}
body.fv2 .fv-picker label.error{margin-top:6px}

body.fv-sheet-open{overflow:hidden}
.fv-sheet{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center;font-family:'Nunito','Roboto',system-ui,-apple-system,'Segoe UI',sans-serif}
.fv-sheet[hidden]{display:none}
.fv-sheet__backdrop{position:absolute;inset:0;background:rgba(43,18,41,.5);animation:fv-fade .18s ease-out}
.fv-sheet__panel{position:relative;display:flex;flex-direction:column;width:100%;max-height:84vh;background:#fff;color:#2b1229;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(43,18,41,.25);animation:fv-rise .22s ease-out;--a:var(--quotation-button,#a32483)}
.fv-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px 20px}
.fv-sheet__title{margin:0;font:800 18px/1.25 'Outfit','Nunito',sans-serif;color:#2b1229}
.fv-sheet__close{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:50%;background:#f6f1f5;color:#2b1229;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fv-sheet__close:hover{background:#ece5ea}
.fv-sheet__search{position:relative;margin:4px 16px 8px;display:flex;align-items:center}
.fv-sheet__search svg{position:absolute;left:14px;color:#7c6479;pointer-events:none}
.fv-sheet__search input{width:100%;height:48px;padding:0 16px 0 44px;border:1px solid #e3dbe1;border-radius:8px;background:#fff;color:#2b1229;font:inherit;font-size:16px;outline:0}
.fv-sheet__search input:focus{border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 16%,transparent)}
.fv-sheet__list{margin:0;padding:4px 8px 16px;list-style:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fv-sheet__item[hidden]{display:none}
.fv-sheet__item button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#2b1229;font:inherit;font-size:16px;text-align:left;cursor:pointer}
.fv-sheet__item button svg{flex:0 0 auto;color:var(--a);opacity:0}
.fv-sheet__item.is-selected button{font-weight:800}
.fv-sheet__item.is-selected button svg{opacity:1}
.fv-sheet__item.is-active button,.fv-sheet__item button:hover{background:#f6f1f5}
.fv-sheet__item--clear button{color:#7c6479;font-size:15px;text-decoration:underline}
.fv-sheet__none{margin:0;padding:24px 20px 32px;text-align:center;color:#7c6479}
@media(min-width:768px){
  .fv-sheet{align-items:center}
  .fv-sheet__panel{width:480px;max-height:72vh;border-radius:14px;box-shadow:0 24px 60px rgba(43,18,41,.3)}
}
@keyframes fv-fade{from{opacity:0}to{opacity:1}}
@keyframes fv-rise{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.fv-sheet__backdrop,.fv-sheet__panel{animation:none}}

/* ---------- Date: DD / MM / YYYY ---------- */
body.fv2 .fv-date{position:relative;display:block;width:100%}
body.fv2 .fv-date[hidden]{display:none}
body.fv2 .fv-date__row{display:flex;align-items:center;gap:8px}
body.fv2 .online-quotation input.fv-date__part,body.fv2 input.fv-date__part{flex:1 1 0;width:auto;min-width:0;height:48px;padding:0 8px;border:1px solid var(--fv2-line);border-radius:var(--fv2-radius);background:#fff;color:var(--fv2-ink);font:inherit;font-size:18px;font-weight:700;letter-spacing:.04em;text-align:center;outline:0;transition:border-color .15s,box-shadow .15s}
body.fv2 .online-quotation input.fv-date__part--year,body.fv2 input.fv-date__part--year{flex:1.7 1 0}
body.fv2 input.fv-date__part::placeholder{color:#b9aab6;font-weight:600;letter-spacing:.02em}
body.fv2 input.fv-date__part:focus{border-color:var(--fv2-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--fv2-accent) 16%,transparent)}
body.fv2 .fv-date__sep{color:var(--fv2-off);font-size:20px;font-weight:700;user-select:none}
body.fv2 .fv-date--error input.fv-date__part,body.fv2 .fv-date--bad input.fv-date__part{border-color:var(--fv2-danger);background:#fffafa}
body.fv2 .fv-date__msg{margin:6px 2px 0;font-size:13px;font-weight:600;color:var(--fv2-danger);text-align:left}
body.fv2 .fv-date__msg[hidden]{display:none}

/* ---------- Help note under a screen (field-block__help) ---------- */
body.fv2 .field-block__help{display:flex;align-items:flex-start;gap:12px;max-width:560px;margin:20px auto 0;padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--fv2-accent) 7%,#fff);color:var(--fv2-muted);text-align:left;font-size:14px;line-height:1.5}
body.fv2 .field-block__help p{margin:0}
body.fv2 .field-block__help-icon{flex:0 0 22px;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--fv2-accent);color:var(--fv2-accent-text);font:800 13px/22px 'Outfit','Nunito',sans-serif;font-style:italic;text-align:center}
body.fv2 .field-block__help[hidden]{display:none}

/* ---------- Waiting page before the formulas ---------- */
body.fv2 .fv-loader{display:none;flex-direction:column;align-items:center;gap:22px;max-width:520px;margin:0 auto;padding:40px 8px 24px;text-align:center}
body.fv2 .fv-loader:not([hidden]){display:flex}
body.fv2 .fv-loader__ring{position:relative;width:92px;height:92px;border-radius:50%;border:6px solid color-mix(in srgb,var(--fv2-accent) 14%,#fff);border-top-color:var(--fv2-accent);animation:fv-spin 1s linear infinite}
body.fv2 .fv-loader__title{margin:0;font-size:24px;line-height:1.25;font-weight:800;color:var(--fv2-ink)}
body.fv2 .fv-loader__steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;text-align:left}
body.fv2 .fv-loader__steps li{position:relative;padding-left:32px;font-size:16px;color:var(--fv2-off);transition:color .3s}
body.fv2 .fv-loader__steps li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;border:2px solid var(--fv2-off);background:#fff;transition:border-color .3s,background .3s}
body.fv2 .fv-loader.is-run .fv-loader__steps li{animation:fv-step .4s forwards}
body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(1){animation-delay:.3s}
body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(2){animation-delay:1.3s}
body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(3){animation-delay:2.3s}
body.fv2 .fv-loader__bar{width:100%;max-width:360px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--fv2-accent) 14%,#fff);overflow:hidden}
body.fv2 .fv-loader__bar span{display:block;height:100%;width:0;border-radius:3px;background:var(--fv2-accent)}
body.fv2 .fv-loader.is-run .fv-loader__bar span{animation:fv-fill 3.2s cubic-bezier(.3,.6,.3,1) forwards}
body.fv2 .fv-quote-loading>:not(.fv-loader){display:none!important}
@keyframes fv-spin{to{transform:rotate(360deg)}}
@keyframes fv-step{to{color:var(--fv2-ink);font-weight:700}}
@keyframes fv-fill{to{width:96%}}
@media(prefers-reduced-motion:reduce){body.fv2 .fv-loader__ring{animation-duration:3s}body.fv2 .fv-loader.is-run .fv-loader__bar span{animation-duration:.01s}}
/* ticks of the waiting steps: drawn by a second pseudo element so the colour transition above stays simple */
body.fv2 .fv-loader__steps li::after{content:"";position:absolute;left:7px;top:6px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s}
body.fv2 .fv-loader.is-run .fv-loader__steps li{--tick:1}
body.fv2 .fv-loader.is-run .fv-loader__steps li::before{animation:fv-tick-bg .4s forwards;animation-delay:inherit}
body.fv2 .fv-loader.is-run .fv-loader__steps li::after{animation:fv-tick .4s forwards;animation-delay:inherit}
body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(1)::before,body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(1)::after{animation-delay:.3s}
body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(2)::before,body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(2)::after{animation-delay:1.3s}
body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(3)::before,body.fv2 .fv-loader.is-run .fv-loader__steps li:nth-child(3)::after{animation-delay:2.3s}
@keyframes fv-tick-bg{to{background:var(--fv2-accent);border-color:var(--fv2-accent)}}
@keyframes fv-tick{to{transform:rotate(45deg) scale(1)}}

/* ---------- Consent boxes on the identity screen ---------- */
body.fv2 .fv-optin{margin:0 0 10px}
body.fv2 .fv-optin .fv-check{margin:0}
body.fv2 .fv-optin-note{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--fv2-muted);text-align:left}

/* ---------- "Souhaitez-vous économiser sur votre assurance habitation ?" ---------- */
body.fv2 .fv-interest__choices{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:420px;margin:8px auto 24px}
body.fv2 .fv-interest__choices .fv-card{flex-direction:row;justify-content:center;width:auto;min-height:56px;padding:12px 18px;border:2px solid var(--fv2-line);border-radius:var(--fv2-radius);color:var(--fv2-ink);font-weight:800}
body.fv2 .fv-interest__choices .fv-card[data-interest="1"]{border-color:var(--fv2-accent);background:color-mix(in srgb,var(--fv2-accent) 8%,#fff);color:var(--fv2-accent)}
body.fv2 .fv-interest__choices .fv-card:hover{background:var(--fv2-soft)}
body.fv2 .fv-interest__choices .fv-card[data-interest="1"]:hover{background:color-mix(in srgb,var(--fv2-accent) 14%,#fff)}

/* ---------- Back action: arrow only (no caption), same height as the Next button ---------- */
body.fv2 .form__back,body.fv2 #online-back,body.fv2 .fv-back{position:relative;flex:0 0 64px;width:64px;min-width:64px;height:56px;padding:0;border:2px solid var(--fv2-accent);border-radius:var(--fv2-radius);background:#fff;color:var(--fv2-accent);font-size:0;display:inline-flex;align-items:center;justify-content:center;gap:0;overflow:visible}
body.fv2 .form__back::before,body.fv2 #online-back::before,body.fv2 .fv-back::before{width:24px;height:20px}
body.fv2 .form__back::after,body.fv2 #online-back::after,body.fv2 .fv-back::after{content:none;display:none}
body.fv2 .form__nav,body.fv2 .fv-actions{padding-bottom:0}
body.fv2 .form__nav,body.fv2 .fv-actions{align-items:center}
body.fv2 .fv-round-action{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 88px;width:88px;text-align:center}
body.fv2 .fv-round{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;min-width:56px;padding:0;border:2px solid var(--fv2-accent);border-radius:50%;background:#fff;color:var(--fv2-accent);cursor:pointer;transition:background .15s,transform .15s;flex:none}
body.fv2 .fv-round svg{width:26px;height:26px}
body.fv2 .fv-round:hover{background:color-mix(in srgb,var(--fv2-accent) 10%,#fff);transform:scale(1.04)}
body.fv2 .fv-round:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--fv2-accent) 25%,transparent)}
body.fv2 .fv-round[hidden]{display:none!important}
body.fv2 .fv-round-action__label{font:700 12px/1.25 'Nunito','Roboto',system-ui,sans-serif;color:var(--fv2-ink)}
body.fv2 .fv-add-driver:has(#online-add-driver[hidden]){display:none}
body.fv2 .fv-drivers{display:flex;align-items:flex-start;gap:16px}
body.fv2 .fv-drivers #license-container{flex:1 1 auto;min-width:0}
@media(max-width:559px){
  body.fv2 .fv-drivers{flex-direction:column;align-items:stretch}
  body.fv2 .fv-drivers .fv-add-driver{align-self:center}
}
@media(min-width:960px){body.fv2 .online-quotation[data-fv-auto] .form__step[data-step="4"]{max-width:680px}}

/* ---------- Licence card ---------- */
body.fv2 .online-quotation[data-fv-auto] .online-driver{padding:18px 18px 20px;border:1px solid var(--fv2-line);border-radius:12px;background:#fff;box-shadow:0 6px 20px rgba(43,18,41,.05);margin:0 0 16px;text-align:left}
body.fv2 .online-quotation[data-fv-auto] .online-driver legend{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;margin:0 0 14px;padding:0;text-align:left;text-transform:none;letter-spacing:0;font:800 18px/1.2 'Outfit','Nunito',sans-serif;color:var(--fv2-ink)}
body.fv2 .online-quotation[data-fv-auto] .online-driver legend::before{content:"";flex:0 0 40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--fv2-accent) 10%,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e96fc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20c.8-4 3.8-6 7.5-6s6.7 2 7.5 6'/%3E%3C/svg%3E") center/22px no-repeat}
body.fv2 .online-quotation[data-fv-auto] .online-driver .online-driver-role{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--fv2-accent) 12%,#fff);color:var(--fv2-accent);font:800 12px/1.3 'Nunito',sans-serif}
body.fv2 .online-quotation[data-fv-auto] .online-driver .remove-driver{margin-left:auto}
body.fv2 .online-quotation[data-fv-auto] .online-driver-fields>div{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
@media(min-width:560px){body.fv2 .online-quotation[data-fv-auto] .online-driver-fields>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.fv2 .online-quotation[data-fv-auto] .online-driver .form-group{margin:0 0 14px;text-align:left}
body.fv2 .online-quotation[data-fv-auto] .online-driver .form__input-label{margin:0 0 6px;font-size:14px;font-weight:700;text-align:left;color:var(--fv2-ink)}
body.fv2 .online-quotation[data-fv-auto] .online-driver-actions{margin-top:6px}
body.fv2 .online-quotation[data-fv-auto] .online-driver-validate{width:100%;height:52px;border-radius:var(--fv2-radius)}
body.fv2 .online-quotation[data-fv-auto] .online-driver--collapsed{background:color-mix(in srgb,var(--fv2-accent) 3%,#fff);border-color:var(--fv2-accent)}

/* Bonus-malus: asked on the validated card, above the claims and incidents */
body.fv2 .online-quotation[data-fv-auto] .online-driver-bonus{margin-top:16px;padding:14px 16px 4px;border-radius:10px;background:color-mix(in srgb,var(--fv2-accent) 6%,#fff);text-align:left}
body.fv2 .online-quotation[data-fv-auto] .online-driver-bonus[hidden]{display:none!important}
body.fv2 .online-quotation[data-fv-auto] .online-driver-bonus__title{margin:0 0 2px;font:800 15px/1.3 'Nunito',system-ui,sans-serif;color:var(--fv2-ink)}
body.fv2 .online-quotation[data-fv-auto] .online-driver-bonus__help{margin:0 0 12px;font-size:13px;line-height:1.4;color:var(--fv2-muted)}
body.fv2 .online-quotation[data-fv-auto] .online-driver-bonus__fields{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
@media(min-width:560px){body.fv2 .online-quotation[data-fv-auto] .online-driver-bonus__fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Claims and incidents */
body.fv2 .online-quotation[data-fv-auto] .online-history-fields>div{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px}
@media(min-width:560px){body.fv2 .online-quotation[data-fv-auto] .online-history-fields>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.fv2 .online-quotation[data-fv-auto] .online-history .form-group{margin:0 0 12px;text-align:left}
body.fv2 .online-quotation[data-fv-auto] .online-history .form__input-label{margin:0 0 6px;font-size:14px;font-weight:700;text-align:left}
body.fv2 .online-quotation[data-fv-auto] .online-history--open{padding:16px;background:color-mix(in srgb,var(--fv2-accent) 3%,#fff)}
body.fv2 .online-quotation[data-fv-auto] .online-history-actions{margin-top:4px;flex-wrap:wrap}
body.fv2 .online-quotation[data-fv-auto] .online-history-actions .validate-history{flex:1 1 180px}
body.fv2 .fv-address-hint.is-ok{color:var(--fv2-accent);font-weight:600}