/* ==================================================================
   Easy Softwares — Configurateur Easy Suite
   Parcours guidé, recommandations et estimation budgétaire.
   Dépend des tokens (:root) définis dans app.css.
   ================================================================== */

/* --- En-tête ------------------------------------------------------- */
.cf-hero {
    position: relative; overflow: hidden; padding: 3.5rem 0 3rem; color: #fff;
    background:
        radial-gradient(ellipse 55% 75% at 10% 15%, rgba(23,107,255,.34), transparent 60%),
        radial-gradient(ellipse 50% 65% at 90% 90%, rgba(23,195,229,.22), transparent 55%),
        linear-gradient(155deg, #04101F 0%, var(--es-dark) 55%, #0A2448 100%);
}
.cf-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(160deg, #000 0%, transparent 60%);
    -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 60%);
}
.cf-hero .container { position: relative; z-index: 1; }
.cf-kicker {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
    background: rgba(243,182,58,.13); border: 1px solid rgba(243,182,58,.42);
    color: var(--es-accent); border-radius: 999px; padding: .4rem 1rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .03em;
}
.cf-title {
    font-family: var(--es-font-heading); font-weight: 800; color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.15; letter-spacing: -.025em;
    margin-bottom: 1rem; text-wrap: balance;
}
.cf-title .grad {
    background: linear-gradient(100deg, var(--es-secondary), var(--es-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cf-lead { color: #C3D3E8; font-size: 1.02rem; line-height: 1.7; max-width: 40rem; margin-bottom: 1.5rem; }
.cf-hero-facts { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.cf-hero-facts span { display: inline-flex; align-items: center; gap: .45rem; color: #9FB4CF; font-size: .86rem; font-weight: 600; }
.cf-hero-facts i { color: var(--es-secondary); font-size: 1rem; }

/* Vignette décorative */
.cf-hero-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px; padding: 1.4rem; backdrop-filter: blur(10px);
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
}
.cf-hero-card-top { display: flex; gap: .4rem; margin-bottom: 1.1rem; }
.cf-hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); }
.cf-hero-dot:first-child { background: rgba(243,182,58,.7); }
.cf-hero-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,.12); margin-bottom: .6rem; }
.cf-hero-bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.10); margin: 1.1rem 0; overflow: hidden; }
.cf-hero-bar span { display: block; height: 100%; border-radius: 5px; background: var(--es-gradient); animation: cfFill 2.4s cubic-bezier(.4,0,.2,1) infinite alternate; }
@keyframes cfFill { from { width: 18%; } }
.cf-hero-price { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; }
.cf-hero-price-l { display: block; color: #7E93B0; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.cf-hero-price-v { display: block; color: var(--es-secondary); font-weight: 700; font-size: .95rem; margin-top: .3rem; }

/* --- Fil de progression -------------------------------------------- */
.cf-wrap { background: var(--es-light); }
.cf-form {
    background: #fff; border-radius: 24px; padding: 2.25rem;
    box-shadow: 0 30px 70px -34px rgba(7,26,54,.35); border: 1px solid var(--es-border);
}
@media (max-width: 575.98px) { .cf-form { padding: 1.35rem; border-radius: 18px; } }

.cf-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 .9rem; }
.cf-step {
    flex: 1 1 0; display: flex; align-items: center; gap: .6rem; min-width: 0;
    padding: .6rem .75rem; border-radius: 13px; background: var(--es-light);
    border: 1px solid transparent; transition: background .25s ease, border-color .25s ease;
}
.cf-step-n {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--es-muted); border: 1px solid var(--es-border); font-size: .95rem;
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cf-step-l {
    font-size: .84rem; font-weight: 700; color: var(--es-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-step.is-current { background: rgba(23,107,255,.07); border-color: rgba(23,107,255,.22); }
.cf-step.is-current .cf-step-n { background: var(--es-gradient); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -8px rgba(23,107,255,.8); }
.cf-step.is-current .cf-step-l { color: var(--es-primary); }
.cf-step.is-done { cursor: pointer; }
.cf-step.is-done .cf-step-n { background: rgba(16,185,129,.12); color: var(--es-success); border-color: rgba(16,185,129,.28); }
.cf-step.is-done .cf-step-l { color: var(--es-ink); }
@media (max-width: 767.98px) {
    .cf-steps { gap: .35rem; }
    .cf-step { padding: .5rem; justify-content: center; }
    .cf-step-l { display: none; }
}

.cf-progress { height: 5px; border-radius: 999px; background: var(--es-border); overflow: hidden; margin-bottom: 2rem; }
.cf-progress span { display: block; height: 100%; border-radius: 999px; background: var(--es-gradient); transition: width .45s cubic-bezier(.4,0,.2,1); }

/* --- Panneaux et questions ----------------------------------------- */
.cf-panel { display: none; border: 0; padding: 0; margin: 0; }
.cf-panel.is-active { display: block; animation: cfIn .4s cubic-bezier(.4,0,.2,1); }
@keyframes cfIn { from { opacity: 0; transform: translateY(12px); } }
.cf-q {
    font-family: var(--es-font-heading); font-weight: 800; font-size: 1.22rem;
    color: var(--es-dark); margin-bottom: .35rem; float: none; width: auto;
}
.cf-help { color: var(--es-muted); font-size: .89rem; margin-bottom: 1.1rem; }

.cf-grid { display: grid; gap: .7rem; }
.cf-grid-sector { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.cf-grid-size   { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.cf-grid-needs  { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.cf-grid-3      { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

/* Tuile à choix unique/multiple */
.cf-tile { display: block; margin: 0; cursor: pointer; }
.cf-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-tile-in {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    height: 100%; min-height: 104px; padding: 1rem .75rem; text-align: center;
    border-radius: 16px; border: 1.5px solid var(--es-border); background: #FBFDFF;
    transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cf-tile-in i { font-size: 1.55rem; color: var(--es-muted); transition: color .25s ease, transform .25s ease; }
.cf-tile-t { font-size: .86rem; font-weight: 700; color: var(--es-ink); line-height: 1.35; }
.cf-tile:hover .cf-tile-in { border-color: rgba(23,107,255,.35); background: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(23,107,255,.5); }
.cf-tile:hover .cf-tile-in i { color: var(--es-primary); transform: scale(1.06); }
.cf-tile input:checked + .cf-tile-in {
    border-color: var(--es-primary); background: linear-gradient(160deg, rgba(23,107,255,.09), rgba(23,195,229,.05));
    box-shadow: 0 0 0 4px rgba(23,107,255,.12);
}
.cf-tile input:checked + .cf-tile-in i { color: var(--es-primary); }
.cf-tile input:focus-visible + .cf-tile-in { outline: 3px solid rgba(23,107,255,.4); outline-offset: 2px; }

/* Pastille à cocher */
.cf-chip { display: block; margin: 0; cursor: pointer; }
.cf-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-chip-in {
    display: flex; align-items: center; gap: .65rem; padding: .8rem .9rem;
    border-radius: 14px; border: 1.5px solid var(--es-border); background: #FBFDFF;
    font-size: .87rem; font-weight: 600; color: var(--es-ink);
    transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.cf-chip-in > i:first-child {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; font-size: .98rem;
    color: var(--es-primary); background: rgba(23,107,255,.09);
    transition: background .25s ease, color .25s ease;
}
.cf-chip-in > span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.cf-chip-check { opacity: 0; color: var(--es-primary); font-size: 1.05rem; transition: opacity .2s ease, transform .2s ease; transform: scale(.6); }
.cf-chip:hover .cf-chip-in { border-color: rgba(23,107,255,.35); background: #fff; transform: translateY(-2px); }
.cf-chip input:checked + .cf-chip-in { border-color: var(--es-primary); background: linear-gradient(100deg, rgba(23,107,255,.09), rgba(23,195,229,.05)); }
.cf-chip input:checked + .cf-chip-in > i:first-child { background: var(--es-gradient); color: #fff; }
.cf-chip input:checked + .cf-chip-in .cf-chip-check { opacity: 1; transform: scale(1); }
.cf-chip input:focus-visible + .cf-chip-in { outline: 3px solid rgba(23,107,255,.4); outline-offset: 2px; }

/* --- Navigation ---------------------------------------------------- */
.cf-nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--es-border); }
.cf-nav-hint { flex: 1 1 auto; text-align: center; font-size: .84rem; font-weight: 600; color: var(--es-muted); }
.cf-nav-hint.is-blocking { color: var(--es-accent); }
.cf-nav-hint.shake { animation: cfShake .45s; }
@keyframes cfShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.cf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 50px; padding: 0 1.5rem; border: 0; border-radius: 13px;
    font-weight: 700; font-size: .92rem; cursor: pointer; white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.cf-btn-primary {
    color: #fff; background: linear-gradient(120deg, var(--es-primary), #2F86FF 45%, var(--es-secondary));
    box-shadow: 0 14px 30px -12px rgba(23,107,255,.8);
}
.cf-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(23,107,255,.9); }
.cf-btn-ghost { color: var(--es-ink); background: var(--es-light); border: 1px solid var(--es-border); }
.cf-btn-ghost:hover { color: var(--es-primary); border-color: rgba(23,107,255,.35); transform: translateY(-2px); }
.cf-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* --- Chargement ---------------------------------------------------- */
.cf-loading { text-align: center; padding: 3.5rem 1rem; }
.cf-spin {
    display: inline-block; width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid var(--es-border); border-top-color: var(--es-primary);
    animation: cfSpin .8s linear infinite;
}
@keyframes cfSpin { to { transform: rotate(360deg); } }
.cf-loading p { margin-top: 1rem; color: var(--es-muted); font-weight: 600; font-size: .92rem; }

/* --- Résultats ----------------------------------------------------- */
.cf-res-intro {
    display: flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem;
    color: var(--es-ink); font-weight: 700; font-size: .95rem;
}
.cf-res-intro i { color: var(--es-accent); font-size: 1.15rem; }

.cf-res {
    position: relative; border: 1.5px solid var(--es-border); border-radius: 20px;
    padding: 1.5rem; margin-bottom: 1.25rem; background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cf-res:hover { border-color: rgba(23,107,255,.3); box-shadow: 0 20px 44px -24px rgba(7,26,54,.4); transform: translateY(-3px); }
.cf-res.is-best { border-color: rgba(243,182,58,.55); box-shadow: 0 22px 50px -26px rgba(243,182,58,.65); }
.cf-res-flag {
    position: absolute; top: -13px; inset-inline-start: 1.5rem;
    display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .85rem;
    border-radius: 999px; font-size: .74rem; font-weight: 800; color: #4A3306;
    background: linear-gradient(100deg, var(--es-accent), #FFD98A);
    box-shadow: 0 8px 18px -8px rgba(243,182,58,.9);
}

.cf-res-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cf-res-ico {
    flex: 0 0 auto; width: 58px; height: 58px; border-radius: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.65rem; color: #fff; background: var(--c, var(--es-primary));
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c, #176BFF) 85%, transparent);
}
.cf-res-id { flex: 1 1 240px; min-width: 0; }
.cf-res-id h3 { font-family: var(--es-font-heading); font-weight: 800; font-size: 1.2rem; color: var(--es-dark); margin: 0 0 .2rem; }
.cf-res-id p { color: var(--es-muted); font-size: .88rem; line-height: 1.5; margin: 0 0 .5rem; }
.cf-res-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.cf-res-meta span { display: inline-flex; align-items: center; gap: .3rem; color: var(--es-muted); font-size: .78rem; font-weight: 600; }
.cf-res-meta i { color: var(--es-accent); }

/* Anneau de score */
.cf-res-score { flex: 0 0 auto; position: relative; width: 92px; text-align: center; }
.cf-ring { width: 60px; height: 60px; transform: rotate(-90deg); }
.cf-ring circle { fill: none; stroke: var(--es-border); stroke-width: 4; }
.cf-ring .cf-ring-v { stroke: url(#cfGrad); stroke: var(--es-primary); stroke-linecap: round; transition: stroke-dasharray 1s cubic-bezier(.4,0,.2,1); }
.cf-res.is-best .cf-ring .cf-ring-v { stroke: var(--es-accent); }
.cf-res-score-v {
    position: absolute; top: 20px; left: 0; right: 0;
    font-family: var(--es-font-heading); font-weight: 800; font-size: 1.05rem; color: var(--es-dark);
}
.cf-res-score-v i { font-style: normal; font-size: .68rem; opacity: .6; }
.cf-res-score-l { display: block; font-size: .68rem; font-weight: 700; color: var(--es-muted); text-transform: uppercase; letter-spacing: .05em; }

.cf-res-why { list-style: none; padding: 0; margin: 1.15rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.cf-res-why li {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem;
    border-radius: 999px; background: rgba(16,185,129,.09); border: 1px solid rgba(16,185,129,.22);
    color: #0B7A55; font-size: .78rem; font-weight: 700;
}
.cf-res-why i { font-size: .88rem; }

.cf-res-quote { margin-top: 1.25rem; padding: 1.1rem 1.2rem; border-radius: 15px; background: var(--es-light); }
.cf-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .42rem 0; font-size: .875rem; }
.cf-line span { display: inline-flex; align-items: center; gap: .5rem; color: var(--es-ink); font-weight: 600; }
.cf-line span i { color: var(--es-primary); font-size: .95rem; }
.cf-line span em { font-style: normal; font-weight: 500; color: var(--es-muted); font-size: .8rem; }
.cf-line b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--es-dark); white-space: nowrap; }
.cf-line-sub { color: var(--es-muted); font-size: .82rem; }
.cf-line-sub span { color: var(--es-muted); font-weight: 600; }
.cf-line-sub b { color: var(--es-muted); font-weight: 600; }
.cf-line-total {
    margin-top: .5rem; padding-top: .8rem; border-top: 1.5px dashed var(--es-border);
    font-size: 1rem;
}
.cf-line-total span { font-family: var(--es-font-heading); font-weight: 800; color: var(--es-dark); }
.cf-line-total b {
    font-family: var(--es-font-heading); font-size: 1.35rem;
    background: var(--es-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cf-res-note { display: flex; align-items: center; gap: .4rem; margin: .8rem 0 0; color: var(--es-muted); font-size: .78rem; }
.cf-res-note i { color: var(--es-secondary); }

.cf-res-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.cf-res-actions .cf-btn { flex: 1 1 210px; }

.cf-empty { text-align: center; padding: 3rem 1rem; }
.cf-empty i { font-size: 2.6rem; color: var(--es-muted); opacity: .5; }
.cf-empty p { margin: 1rem 0 1.5rem; color: var(--es-muted); font-weight: 600; }

/* --- Modale de devis ----------------------------------------------- */
.cf-modal {
    position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center;
    padding: 1.25rem; background: rgba(4,16,31,.72); backdrop-filter: blur(6px);
    animation: cfFade .25s ease;
}
@keyframes cfFade { from { opacity: 0; } }
.cf-modal[hidden] { display: none; }
.cf-modal-box {
    position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
    background: #fff; border-radius: 22px; padding: 2.1rem;
    box-shadow: 0 40px 90px -30px rgba(3,12,28,.7);
    animation: cfPop .3s cubic-bezier(.4,0,.2,1);
}
@keyframes cfPop { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@media (max-width: 575.98px) { .cf-modal-box { padding: 1.5rem; border-radius: 18px; } }
.cf-modal-x {
    position: absolute; top: .9rem; inset-inline-end: .9rem; width: 38px; height: 38px;
    border: 0; border-radius: 11px; background: var(--es-light); color: var(--es-muted);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.cf-modal-x:hover { background: rgba(239,68,68,.1); color: var(--es-danger); }
.cf-modal-seal {
    width: 56px; height: 56px; border-radius: 17px; margin-bottom: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.45rem; color: #fff; background: var(--es-gradient);
    box-shadow: 0 14px 30px -12px rgba(23,107,255,.8);
}
.cf-modal-t { font-family: var(--es-font-heading); font-weight: 800; font-size: 1.4rem; color: var(--es-dark); margin-bottom: .3rem; }
.cf-modal-s { color: var(--es-muted); font-size: .89rem; line-height: 1.6; margin-bottom: 1.4rem; }

.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-frow { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 480px) { .cf-frow { grid-template-columns: 1fr; } }
.cf-f { margin-bottom: .8rem; }
.cf-f label { display: block; font-size: .77rem; font-weight: 700; color: var(--es-ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.cf-f input {
    width: 100%; height: 48px; border-radius: 12px; border: 1.5px solid var(--es-border);
    background: #F7FAFE; padding: 0 .95rem; font-size: .92rem; color: var(--es-ink);
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.cf-f input::placeholder { color: #A9B8CE; }
.cf-f input:focus { outline: none; background: #fff; border-color: var(--es-primary); box-shadow: 0 0 0 4px rgba(23,107,255,.13); }

.cf-consent { display: flex; align-items: flex-start; gap: .6rem; margin: .5rem 0 1.1rem; cursor: pointer; }
.cf-consent input { width: 19px; height: 19px; margin-top: .1rem; accent-color: var(--es-primary); flex: 0 0 auto; }
.cf-consent span { font-size: .82rem; color: var(--es-muted); line-height: 1.5; }

.cf-modal-err {
    background: #FDECEC; color: #B42318; border-radius: 12px; padding: .75rem .95rem;
    font-size: .85rem; font-weight: 600; margin-bottom: .9rem;
}
.cf-modal-note { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .9rem 0 0; color: var(--es-muted); font-size: .76rem; }
.cf-modal-note i { color: var(--es-success); }

.cf-modal-done { text-align: center; padding: 1rem 0; }
.cf-done-seal {
    width: 66px; height: 66px; border-radius: 50%; margin-bottom: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff; background: linear-gradient(140deg, var(--es-success), #34D399);
    box-shadow: 0 16px 34px -12px rgba(16,185,129,.8);
    animation: cfPopIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cfPopIn { from { transform: scale(.4); opacity: 0; } }
.cf-modal-done h3 { font-family: var(--es-font-heading); font-weight: 800; font-size: 1.3rem; color: var(--es-dark); margin-bottom: .5rem; }
.cf-modal-done p { color: var(--es-muted); font-size: .9rem; line-height: 1.6; margin-bottom: 1rem; }
.cf-done-ref {
    display: inline-block; padding: .5rem 1.1rem; border-radius: 11px;
    background: var(--es-light); font-family: monospace; font-weight: 700;
    font-size: 1.05rem; color: var(--es-primary); letter-spacing: .05em;
}

/* --- Mouvement réduit ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cf-panel.is-active, .cf-modal, .cf-modal-box, .cf-done-seal { animation: none; }
    .cf-hero-bar span { animation: none; width: 92%; }
    .cf-btn, .cf-tile-in, .cf-chip-in, .cf-res { transition: none; }
    .cf-btn:hover, .cf-tile:hover .cf-tile-in, .cf-chip:hover .cf-chip-in, .cf-res:hover { transform: none; }
}