/* France Étranger web design kit (03/11/2026): the app's screens, for every site page.
   Cards #fff, hairline rgba(0,0,0,.07), radius 16-20, soft shadow; icon tiles in five tones;
   tick lists; the blue gradient button. Motion: transform and opacity only. */
.ui-blue{--c:#1f49d4;--tint:color-mix(in srgb,#1f49d4 9%,#fff)}
.ui-green{--c:#16a34a;--tint:color-mix(in srgb,#16a34a 10%,#fff)}
.ui-violet{--c:#6d3fd6;--tint:color-mix(in srgb,#6d3fd6 10%,#fff)}
.ui-rose{--c:#d9365e;--tint:color-mix(in srgb,#d9365e 9%,#fff)}
.ui-amber{--c:#c96d00;--tint:color-mix(in srgb,#c96d00 10%,#fff)}
.ui-teal{--c:#0f8a8a;--tint:color-mix(in srgb,#0f8a8a 10%,#fff)}

.ui-section{padding:44px 0 8px}
.ui-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1f49d4;margin:0 0 8px}
.ui-h2{font-size:clamp(24px,3.2vw,30px);line-height:1.2;letter-spacing:-.015em;font-weight:750;color:#15171c;margin:0 0 8px}
.ui-lead{font-size:16.5px;line-height:1.55;color:#4a5468;margin:0 0 22px;max-width:720px}

.ui-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.ui-grid--2,.ui-grid--3,.ui-grid--4{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.ui-grid--3{grid-template-columns:repeat(3,1fr)}.ui-grid--4{grid-template-columns:repeat(4,1fr)}}

.ui-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:20px;color:#15171c;text-decoration:none;transition:transform .15s ease}
a.ui-card:hover{text-decoration:none;transform:translateY(-2px)}
a.ui-card:active{transform:scale(.98)}
.ui-card--row{flex-direction:row;align-items:flex-start;gap:14px}
.ui-card--wash{overflow:hidden}
.ui-card--wash::before{content:"";position:absolute;inset:0 0 auto 0;height:110px;background:linear-gradient(180deg,var(--tint),rgba(255,255,255,0));pointer-events:none}
.ui-card--wash>*{position:relative}

.ui-tile{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--c);background:none;animation:ui-icon-pop .7s cubic-bezier(.2,.8,.2,1) both}
.ui-tile svg{width:30px;height:30px}
.ui-tile ion-icon{font-size:30px;width:30px;height:30px}
.ui-tile--lg{width:40px;height:40px;margin-bottom:12px}
.ui-tile--lg svg{width:34px;height:34px}
.ui-tile--lg ion-icon{font-size:34px;width:34px;height:34px}

.ui-title{display:block;font-size:16.5px;font-weight:700;line-height:1.3;color:#15171c;margin:0 0 4px}
.ui-title--lg{font-size:21px;letter-spacing:-.01em;margin-bottom:12px}
.ui-text{display:block;font-size:14.5px;line-height:1.5;color:#5b6475;margin:0}
.ui-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:650;color:#1f49d4}

.ui-ticks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.ui-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:#3a4258}
.ui-ticks li::before{content:"✓";flex:0 0 22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--c,#16a34a);background:var(--tint,color-mix(in srgb,#16a34a 10%,#fff));margin-top:1px}

.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border:0;border-radius:13px;color:#fff!important;font:inherit;font-size:15.5px;font-weight:700;text-decoration:none!important;background:linear-gradient(180deg,#2f63ee,#1f49d4);box-shadow:0 6px 16px rgba(31,73,212,.22);transition:transform .12s ease;cursor:pointer}
.ui-btn:active{transform:scale(.98)}
.ui-card .ui-btn{margin-top:auto}

.ui-step{display:flex;gap:12px;align-items:flex-start}
.ui-step-n{flex:0 0 32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#1f49d4;background:color-mix(in srgb,#1f49d4 10%,#fff)}

.ui-quote{font-size:15px;line-height:1.55;color:#3a4258;margin:0 0 12px}
.ui-who{font-size:13px;font-weight:650;color:#5b6475}
.ui-stores{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── App skin for the existing site components (03/11/2026) ────────────────────────────
   Restyles the generated pages (délais, guides, services, simulateurs) without regenerating
   them. Only colours, radii, borders, shadows and spacing: no layout or text changes. */
.btn--primary,.topbar__cta{background:linear-gradient(180deg,#2f63ee,#1f49d4)!important;border-color:transparent!important;box-shadow:0 6px 16px rgba(31,73,212,.22);border-radius:12px!important}
.btn--primary:active,.topbar__cta:active{transform:scale(.98)}
.seo-h1{letter-spacing:-.02em}
.seo-h2,.guide-h2{letter-spacing:-.01em}
.seo-eyebrow{color:#1f49d4;font-weight:700;letter-spacing:.06em}

/* Délais: the median as the screen's one big figure card */
section#seo-current-delay{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:20px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:22px 24px;margin-top:8px}
section#seo-current-delay>p:first-of-type{color:#1f49d4;letter-spacing:-.02em}
#refus-implicite>div,#ma-situation>div{border-radius:20px!important}
#ma-situation>div{background:#fff!important;border:1px solid rgba(0,0,0,.07)!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important}
.delais-reveal{border-radius:20px;overflow:hidden}
.delais-reveal-list,.seo-list{list-style:none;padding-left:0}
.delais-reveal-list li,.seo-list li{position:relative;padding-left:32px;margin:0 0 10px}
.seo-list li::before,.delais-reveal-list li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#16a34a;background:color-mix(in srgb,#16a34a 10%,#fff)}
.delais-cross-card,.delais-neighbour-card,.guide-related-link,.app-cta-card{background:#fff!important;border:1px solid rgba(0,0,0,.07)!important;border-radius:18px!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;transition:transform .15s ease}
a.delais-cross-card:hover,a.delais-neighbour-card:hover,a.guide-related-link:hover{transform:translateY(-2px);text-decoration:none}
a.delais-cross-card:active,a.delais-neighbour-card:active,a.guide-related-link:active{transform:scale(.98)}
.delais-cross-kicker{color:#1f49d4;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:12px}
.delais-cross-cta,.delais-neighbour-cta{color:#1f49d4;font-weight:650}
.app-cta-card,.app-cta-card h2,.app-cta-card p{color:#15171c!important}
.app-cta-card p{color:#5b6475!important}

/* Guides */
.guide-article details,.service-faq-item{border-radius:14px}
.guide-toc,.guide-cta-card,.guide-hub-card,.quiz-hub-card,.scope__card,.feature-card,.svc-review{border-radius:18px!important;border:1px solid rgba(0,0,0,.07)!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;background:#fff!important}
.guide-cta-card,.guide-cta-card *{color:#15171c}
.guide-cta-card p{color:#5b6475}
.guide-hub-eyebrow{background:color-mix(in srgb,#1f49d4 9%,#fff)!important;color:#1f49d4!important}
.guide-faq-item{border:1px solid rgba(0,0,0,.07);border-radius:14px;padding:14px 16px;margin:0 0 8px;background:#fff}
.guide-faq-q{font-weight:680}
a.guide-hub-card:hover,a.feature-card:hover,a.quiz-hub-card:hover{transform:translateY(-2px)}
a.guide-hub-card,a.feature-card,a.quiz-hub-card{transition:transform .15s ease}
/* Services pages (build_services_pages.mjs) and the hub */
.service-row-cta{border-radius:12px!important}
.service-faq-item{border:1px solid rgba(0,0,0,.07)!important;background:#fff;padding:14px 16px;margin:0 0 8px}
/* Simulateurs hub */
.sim-card,.simulator-card,.sim-hub-card{border-radius:18px!important;border:1px solid rgba(0,0,0,.07)!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;background:#fff!important}
.howto-step{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:16px}
.howto-step-num{border-radius:11px!important;color:#1f49d4!important;background:color-mix(in srgb,#1f49d4 10%,#fff)!important}
.service-trust-icon{border-radius:12px!important;color:#1f49d4!important;background:color-mix(in srgb,#1f49d4 9%,#fff)!important}
.service-hero-check{color:#16a34a!important}
.order-form-submit,.sticky-buy a,.sticky-buy button{background:linear-gradient(180deg,#2f63ee,#1f49d4)!important;border-radius:13px!important;border:0!important}
.order-form-input{border-radius:12px!important}

.delais-reveal-list li::before{color:#fff;background:rgba(255,255,255,.18)}

/* 03/11/2026 (Yas: "icons like the interview prep pages"): large outline icons in the tone colour,
   no tinted square, popping in like the app's benefit rows. Transform/opacity only. */
.ui-tile{width:36px;height:36px;flex:0 0 36px;background:none!important;box-shadow:none!important;border-radius:0;margin-top:1px;animation:ui-icon-pop .6s cubic-bezier(.2,.8,.2,1) both}
.ui-tile ion-icon{font-size:31px}
.ui-tile svg{width:31px;height:31px}
.ui-tile--lg{width:44px;height:44px;flex-basis:44px;margin-bottom:12px}
.ui-tile--lg ion-icon{font-size:38px}
@keyframes ui-icon-pop{from{opacity:0;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.ui-tile{animation:none}}

/* 03/11/2026 (Yas: "colorful icons" on the home tools): app-icon tiles, gradient + white glyph. */
.ui-appicon{flex:0 0 34px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--c);background:none;animation:ui-icon-pop .7s cubic-bezier(.2,.8,.2,1) both}
.ui-appicon ion-icon{font-size:30px;width:30px;height:30px}
.ui-card--row:has(.ui-appicon){align-items:flex-start}

/* 03/11/2026 homepage hero pass (Yas "do 1 to 6"): short title + chips, store badges as the
   main action, app screen behind the request card, white request card. */
.mb .hero{padding:48px 0 72px;overflow-x:clip}
.mb .hero__inner{align-items:start}
.hp-eyebrow{display:inline-flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.hp-eyebrow span{font-size:13px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);padding:6px 11px;border-radius:999px}
.mb .hero h1{font-size:46px;line-height:1.08;letter-spacing:-.025em}
.hp-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:28px}
.hp-actions .hero__stores{margin:0}
.hp-more{font-size:15px;font-weight:650;color:#1f49d4}
@media(max-width:900px){.mb .hero h1{font-size:34px}}
/* Request card on every page: white, one level of text before the first choice. */
.mock{position:relative;z-index:1;background:#fff!important;border:1px solid color-mix(in srgb,#1f49d4 22%,#fff)!important;box-shadow:0 0 0 6px color-mix(in srgb,#1f49d4 6%,transparent),0 24px 60px rgba(31,73,212,.18)!important;border-radius:22px!important}
.mb .hero__card{position:relative;margin-top:28px}
.mb .hero__card::before{content:"";position:absolute;inset:-60px -50px;z-index:0;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,#2f63ee 16%,transparent),transparent 72%)}
.mock:has(.ft-tap)::before{content:"Diagnostic gratuit";display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#1f49d4;background:color-mix(in srgb,#1f49d4 9%,#fff)}
@media(max-width:900px){.mb .hero__card{margin-top:8px}.mb .hero__card::before{inset:-30px 0}}
.mock:has(.ft-tap)>.mock__title,.mock:has(.ft-tap)>.mock__sub{display:none}
a.sim-card{position:relative;padding-left:76px!important}
a.sim-card .sim-ico{position:absolute;left:28px;top:28px;margin:0}
@media(max-width:560px){a.sim-card{padding-left:66px!important}a.sim-card .sim-ico{left:20px;top:24px}}
a.sim-card{transition:transform .15s ease}
a.sim-card:active{transform:scale(.98)}
.intake-card{background:#fff!important;border:1px solid rgba(0,0,0,.07)!important;box-shadow:0 10px 30px rgba(20,30,70,.10)!important;border-radius:20px!important}
.intake-card:has(.ft-tap) .intake-card-head{display:none}
.triage-chip{border-radius:999px!important;border:1px solid rgba(0,0,0,.08)!important;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.triage-chip:active{transform:scale(.98)}