/* Sprint 3 V8.5.0 : wrapper @layer legacy pour cascade unifiee (Lesson #249).
   AVANT : UNLAYERED battait LAYERED app.css/style.css.
   APRES : meme layer = cascade classique source order + specificite. */
@layer legacy {
/* ============================================================================
   CALCULATORS — Composants partagés des pages calculateurs juridiques
   ============================================================================
   Inclus par : loyer_irl, penalites_b2b, generateur_med, pension_alimentaire,
                simulateur_cout, verificateur_prescription, licenciement

   Structure interne :
   - SHARED : règles communes à tous les calculators (ex-_base_calc.html)
   - <CALC>-SPECIFIC : règles spécifiques à un calculator donné, extraites
     en Phase 4.4+ depuis les <style> inline résiduels

   Anciennement dans templates/calculators/_base_calc.html (anti-pattern
   <style>{% include 'partial.html' %}</style>). Migré en Phase 4.0 du
   chantier frontend vers fichier CSS dédié servi via <link rel="stylesheet">.
   ============================================================================ */

/* === SHARED (used by all 7 calculators) === */
/* V7.13.7+ : .res-hero base deplacee dans style.css (groupage avec autres heros) */
.res-container { max-width:880px; margin:0 auto; padding:0 1.5rem; }
.res-breadcrumb { font-size:.78rem; color:var(--hero-text-dim); margin-bottom:1rem; }
.res-breadcrumb a { color:var(--hero-text-dim); text-decoration:none; }
.res-breadcrumb a:hover { color:var(--hero-text); }
.res-tag { display:inline-block; background:var(--surface-accent-soft); color:var(--text-on-accent-soft); font-size:.75rem; font-weight:700; padding:.3rem .8rem; border-radius:20px; text-transform:uppercase; letter-spacing:.05em; }
.res-hero h1 { font-size:1.9rem; font-weight:800; margin:.5rem 0 1rem; line-height:1.25; }
.res-hero .intro { color:var(--hero-text-muted); font-size:1rem; line-height:1.7; max-width:700px; }
.res-body { max-width:880px; margin:0 auto; padding:2.5rem 1.5rem; }
.en-bref { border-inline-start:4px solid var(--primary); background:color-mix(in srgb, var(--accent) 4%, transparent); padding:1rem 1.25rem; border-radius:0 10px 10px 0; margin:0 0 2rem; }
.en-bref strong { color:var(--text-main); font-size:.9rem; }
.en-bref p { font-size:.88rem; color:var(--text-main); line-height:1.7; margin:.4rem 0 0; }
/* Border splite (width+style+color) pour override dark non-shadowed. Cf css_known_bugs C3 */
/* V7.5 container query : .calc-grid s'adapte a la taille de .calc-box, pas viewport */
.calc-box { background:var(--surface); border-width:2px; border-style:solid; border-color:var(--accent); border-radius:14px; padding:1.5rem 2rem; margin:1.5rem 0 2rem; container-type: inline-size; container-name: calc-box; }
.calc-box h3 { font-size:1.05rem; font-weight:700; margin:0 0 1rem; color:var(--text-main); }
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.calc-field { display:flex; flex-direction:column; gap:.25rem; }
.calc-field label { font-size:.8rem; font-weight:600; color:var(--text-muted); }
.calc-field input, .calc-field select { padding:.6rem .75rem; border:1px solid var(--border); border-radius:8px; font-size:.9rem; background:var(--input-bg); color:var(--text-main); transition:border-color .2s; }
.calc-field input:focus, .calc-field select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.1); }
/* WCAG 2.4.7 AA Phase 2 V6b.5 : override outline:none pour keyboard focus */
.calc-field input:focus-visible, .calc-field select:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.calc-field-full { grid-column:1 / -1; }
.calc-btn { margin-top:1rem; padding:.75rem 2rem; background:var(--btn-solid-bg); color:var(--btn-solid-fg); border:var(--btn-solid-border-width) solid var(--btn-solid-border); border-radius:8px; font-weight:700; font-size:.95rem; cursor:pointer; width:100%; transition:var(--transition-base); box-shadow:var(--btn-solid-shadow); /* var(--accent) parent preserve via --btn-solid-bg */ }
.calc-btn:hover { box-shadow:var(--btn-solid-shadow-hover); transform:translateY(calc(var(--btn-solid-lift) * -1)); }
.calc-btn:active { transform:translateY(0); box-shadow:var(--btn-solid-shadow); }
.htmx-request .calc-btn { opacity:.6; pointer-events:none; }
#result-area { min-height:2rem; }
.calc-result-inner { padding:1.25rem; border-radius:12px; margin-top:1rem; }
.calc-result--ok { background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.2); }
.calc-result--warn { background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.2); }
.calc-result__label { font-size:.82rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 .25rem; }
.calc-result__amount { font-size:1.8rem; font-weight:800; color:var(--accent); margin:0; line-height:1.3; }
.calc-result__title { font-size:1rem; font-weight:700; color:#d97706; margin:0 0 .4rem; }
.calc-result__detail { font-size:.85rem; color:var(--text-muted); margin:.5rem 0 0; line-height:1.6; }
.calc-result__formula { font-size:.78rem; color:var(--text-muted); margin:.5rem 0 0; font-style:italic; }
.calc-result__breakdown { margin:.75rem 0; }
.calc-mini-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.calc-mini-table td { padding:.4rem .6rem; border-bottom:1px solid var(--border); color:var(--text-main); }
.calc-mini-table .total-row td { font-weight:700; border-top:2px solid var(--accent); background:rgba(59,130,246,.04); }
.text-right { text-align:end; }
.calc-cta { margin-top:1.25rem; padding:1.25rem; background:linear-gradient(135deg,color-mix(in srgb, var(--accent) 6%, transparent),color-mix(in srgb, var(--accent) 12%, transparent)); border-radius:10px; text-align:center; }
.calc-cta__text { font-size:.9rem; color:var(--text-main); font-weight:500; margin:0 0 .75rem; }
.calc-cta__btn { display:inline-block; padding:.7rem 1.8rem; background:var(--btn-solid-bg); color:var(--btn-solid-fg); border:var(--btn-solid-border-width) solid var(--btn-solid-border); border-radius:8px; font-weight:700; font-size:.95rem; text-decoration:none; transition:var(--transition-base); box-shadow:var(--btn-solid-shadow); /* var(--accent) parent preserve via --btn-solid-bg */ }
.calc-cta__btn:hover { box-shadow:var(--btn-solid-shadow-hover); transform:translateY(calc(var(--btn-solid-lift) * -1)); }
.calc-cta__btn:active { transform:translateY(0); box-shadow:var(--btn-solid-shadow); }
.legal-note { background:rgba(234,179,8,.08); border:1px solid rgba(234,179,8,.3); border-radius:10px; padding:1rem 1.25rem; margin:2rem 0; }
.legal-note p { font-size:.82rem; color:var(--text-muted); line-height:1.6; margin:0; }
.legal-note strong { color:var(--text-main); }
/* Article Topical Authority */
.art-body { margin:2.5rem 0 0; }
.art-body h2 { font-size:1.2rem; font-weight:700; color:var(--text-main); margin:2rem 0 .75rem; padding-bottom:.5rem; border-bottom:2px solid var(--border); }
.art-body h3 { font-size:1.02rem; font-weight:600; color:var(--text-main); margin:1.25rem 0 .5rem; }
.art-body p { font-size:.92rem; color:var(--text-main); line-height:1.8; margin:0 0 .9rem; }
.art-body ul, .art-body ol { font-size:.92rem; color:var(--text-main); line-height:1.8; margin:0 0 1rem; padding-inline-start:1.5rem; }
.art-body li { margin-bottom:.35rem; }
.art-body strong { color:var(--text-main); }
.art-body blockquote { border-inline-start:3px solid var(--accent); margin:1rem 0; padding:.6rem 1rem; background:rgba(59,130,246,.03); font-size:.88rem; color:var(--text-muted); font-style:italic; border-radius:0 8px 8px 0; }
.art-cta-box { background:linear-gradient(135deg,color-mix(in srgb, var(--accent) 6%, transparent),color-mix(in srgb, var(--accent) 14%, transparent)); border-radius:12px; padding:1.5rem 2rem; margin:1.5rem 0; text-align:center; }
.art-cta-box p { font-size:.95rem; font-weight:500; margin:0 0 .75rem; color:var(--text-main); }
/* V8.21.0l : factorisation inline styles intros calculateurs (D-V8207-3) */
.art-body--centered { max-width:760px; margin:1.5rem auto 0; padding:0 1rem; }
.art-intro-lead { font-size:.95rem; line-height:1.65; color:var(--text-secondary); }
.art-ref-meta { margin-top:1.5rem; font-size:.85rem; color:var(--text-muted); }
.art-section--spaced { margin-top:2rem; }
.art-section--spaced h3 { margin:0 0 .75rem; }
/* V7.5 : .calc-grid en @container (s'adapte au conteneur .calc-box, ex sidebar) */
@container calc-box (max-width: 640px) { .calc-grid { grid-template-columns: 1fr; } }
/* Reste en @media : layout page-level depend du viewport */
@media (max-width: 640px) { .res-hero h1 { font-size:1.4rem; } .calc-result__amount { font-size:1.4rem; } }
:root.theme-dark .calc-box {
    border-color:rgba(59,130,246,.3);
}
:root.theme-dark .calc-result--ok {
    background:rgba(59,130,246,.08);
    border-color:rgba(59,130,246,.15);
}

/* Dark mode parity (Sprint 5 V6b.5 Phase 1 - parite OS) */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) .calc-box {
    border-color:rgba(59,130,246,.3);
}
    :root:not(.theme-light) .calc-result--ok {
    background:rgba(59,130,246,.08);
    border-color:rgba(59,130,246,.15);
}
}

/* === VERIFICATEUR-PRESCRIPTION-SPECIFIC (extracted from verificateur_prescription.html Phase 4.4) === */
.presc-detail { display:flex; flex-direction:column; gap:.5rem; margin-top:.75rem; }
.presc-detail__row { display:flex; justify-content:space-between; align-items:center; padding:.4rem 0; border-bottom:1px solid var(--border); font-size:.88rem; }
.presc-detail__label { color:var(--text-muted); font-weight:500; }
.presc-detail__value { color:var(--text-main); font-weight:600; }
.presc-days { font-size:1.6rem; font-weight:800; margin:.5rem 0; }
.presc-days--ok { color:var(--accent); }
.presc-days--warn { color:#d97706; }
.presc-article { display:inline-block; background:rgba(59,130,246,.08); color:var(--accent); font-size:.78rem; font-weight:600; padding:.25rem .6rem; border-radius:6px; margin-top:.25rem; }
.presc-note { font-size:.82rem; color:var(--text-muted); margin-top:.75rem; line-height:1.6; font-style:italic; }
/* V7.5 : .presc-detail__row depend du conteneur .calc-box (split layout vs typo) */
@container calc-box (max-width: 640px) {
    .presc-detail__row { flex-direction: column; align-items: flex-start; gap: .15rem; }
}
@media (max-width: 640px) {
    .presc-days { font-size: 1.3rem; }
}

/* === SIMULATEUR-COUT-SPECIFIC (extracted from simulateur_cout.html Phase 4.5) === */
.sim-table-wrap { overflow-x:auto; margin-top:1rem; -webkit-overflow-scrolling:touch; }
.sim-table { width:100%; border-collapse:collapse; font-size:.88rem; min-width:480px; }
.sim-table th { text-align:start; padding:.6rem .75rem; background:var(--surface); border-bottom:2px solid var(--border); color:var(--text-muted); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.sim-table td { padding:.6rem .75rem; border-bottom:1px solid var(--border); color:var(--text-main); vertical-align:middle; }
.sim-table tr.sim-row--highlight { background:rgba(59,130,246,.06); }
.sim-table tr.sim-row--highlight td { font-weight:600; }
.sim-tag { display:inline-block; font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:4px; text-transform:uppercase; letter-spacing:.03em; }
.sim-tag--best { background:rgba(16,185,129,.12); color:#059669; }
.sim-tag--slow { background:rgba(245,158,11,.1); color:#b45309; }
.sim-note { font-size:.85rem; color:var(--text-muted); margin-top:1rem; line-height:1.6; padding:.75rem 1rem; background:rgba(59,130,246,.04); border-radius:8px; }

/* Dark mode forcé (toggle manuel) */

:root.theme-dark .sim-table tr.sim-row--highlight {
    background:rgba(59,130,246,.08);
}

/* Dark mode auto OS — parité stricte avec le bloc forcé ci-dessus (Phase 4.5 alignement doctrine) */
@media (prefers-color-scheme: dark) {
    
    :root:not(.theme-light) .sim-table tr.sim-row--highlight {
    background:rgba(59,130,246,.08);
}
}

@media (max-width: 640px) {
    .sim-table { font-size:.8rem; }
    .sim-table th, .sim-table td { padding:.4rem .5rem; }
}

/* === LICENCIEMENT-SPECIFIC (extracted from licenciement.html Phase 4.6) === */

/* Convention collective autocomplete */
.calc-accordion{margin-top:1rem;border:1px solid var(--border-card);border-radius:8px;overflow:hidden}
.calc-accordion__trigger{padding:.75rem 1rem;cursor:pointer;font-weight:600;color:var(--text-main);background:var(--surface);list-style:none}
.calc-accordion__trigger::-webkit-details-marker{display:none}
.calc-accordion__trigger::before{content:"\25B8 ";transition:transform .2s}
.calc-accordion[open] .calc-accordion__trigger::before{content:"\25BE "}
.calc-accordion__body{padding:.75rem 1rem 1rem}
.calc-accordion__hint{font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem}

/* Dropdown convention collective */
.cc-dropdown{position:absolute;top:100%;inset-inline:0;z-index:10;background:var(--bg-card);border:1px solid var(--border-card);border-radius:0 0 8px 8px;max-height:240px;overflow-y:auto;box-shadow:0 4px 12px var(--bg-overlay)}
.cc-dropdown__item{padding:.5rem .75rem;cursor:pointer;border-bottom:1px solid var(--border-muted);font-size:.9rem;color:var(--text-main)}
.cc-dropdown__item:hover,.cc-dropdown__item--active{background:var(--primary);color:var(--text-on-primary)}
.cc-dropdown__item-idcc{font-size:.75rem;color:var(--text-muted);margin-inline-start:.5rem}
.cc-dropdown__item:hover .cc-dropdown__item-idcc,.cc-dropdown__item--active .cc-dropdown__item-idcc{color:var(--text-on-primary)}
.cc-dropdown__item-badge{display:inline-block;font-size:.65rem;padding:1px 5px;border-radius:3px;margin-inline-start:.4rem;background:var(--success-surface);color:var(--success-surface-text)}
.cc-selected{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--success-surface);color:var(--success-surface-text);border-radius:6px;margin-top:.5rem;font-size:.9rem}
.cc-clear-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--success-surface-text);padding:0 .25rem;line-height:1}

/* Comparison cards (favorable / défavorable) */
.calc-compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.75rem 0}
.calc-compare__card{padding:1rem;border-radius:8px;border:1px solid var(--border-card);background:var(--surface)}
.calc-compare__card--favorable{border-color:var(--success-text-strong);background:var(--success-surface)}
.calc-compare__type{font-weight:600;font-size:.85rem;color:var(--text-secondary);margin-bottom:.25rem}
.calc-compare__card--favorable .calc-compare__type{color:var(--success-surface-text)}
.calc-compare__amount{font-size:1.5rem;font-weight:700;color:var(--text-main)}
.calc-compare__card--favorable .calc-compare__amount{color:var(--success-surface-text)}
.calc-compare__ref,.calc-compare__formula,.calc-compare__note{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}
.calc-compare__card--favorable .calc-compare__ref,.calc-compare__card--favorable .calc-compare__formula{color:var(--success-surface-text)}
.calc-compare__badge{display:inline-block;margin-top:.5rem;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:700;background:var(--success);color:var(--text-on-primary);letter-spacing:.03em}
.calc-result__disclaimer{font-size:.8rem;color:var(--text-muted);font-style:italic;margin-top:.5rem}
/* V7.5 : .calc-compare s'adapte au conteneur .calc-box, pas viewport */
@container calc-box (max-width: 600px) {
    .calc-compare { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HUB CALCULATEURS — page d'index /outils (migré de calculators/hub.html Phase 4.12)
   ========================================================================== */
.hub-hero { background: var(--hero-gradient); color: var(--hero-text); padding: 3.5rem 1.5rem 3rem; }
.hub-container { max-width:960px; margin:0 auto; }
.hub-hero h1 { font-size:2rem; font-weight:800; line-height:1.25; margin:.5rem 0 1rem; text-align:center; }
.hub-hero .intro { color:var(--hero-text-muted); font-size:1.05rem; line-height:1.7; max-width:700px; margin:0 auto; text-align:center; }
.hub-tag { display:inline-block; background:var(--surface-accent-soft); color:var(--text-on-accent-soft); font-size:.75rem; font-weight:700; padding:.3rem .8rem; border-radius:20px; text-transform:uppercase; letter-spacing:.05em; }
.hub-hero .hub-container { text-align:center; }

.hub-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; max-width:960px; margin:-2rem auto 0; padding:0 1.5rem; position:relative; z-index:2; }
.hub-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.75rem; text-decoration:none; color:var(--text-main); transition:transform .2s,box-shadow .2s,border-color .2s; display:flex; flex-direction:column; gap:.75rem; }
.hub-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px -8px rgba(15,23,42,.12); border-color:var(--accent); }
.hub-card__icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.hub-card__icon--travail { background:color-mix(in srgb, var(--danger) 10%, transparent); color:var(--danger-text-strong); }
.hub-card__icon--immobilier { background:color-mix(in srgb, var(--success) 10%, transparent); color:var(--success-text-strong); }
.hub-card__icon--famille { background:color-mix(in srgb, var(--purple) 10%, transparent); color:var(--purple); }
.hub-card__icon--commercial { background:color-mix(in srgb, var(--warning) 10%, transparent); color:var(--warning-text-strong); }
.hub-card__icon--interets { background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--accent); }
.hub-card__icon--med { background:color-mix(in srgb, var(--success) 10%, transparent); color:var(--success-text-strong); }
.hub-card__icon--prescription { background:rgba(244,63,94,.1); color:#f43f5e; }
.hub-card__icon--simulateur { background:color-mix(in srgb, var(--indigo) 10%, transparent); color:var(--indigo-text-strong); }
.hub-card__title { font-size:1.1rem; font-weight:700; color:var(--text-main); }
.hub-card__desc { font-size:.88rem; color:var(--text-muted); line-height:1.6; flex:1; }
.hub-card__cta { font-size:.82rem; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:.3rem; }

.hub-section { max-width:960px; margin:3rem auto; padding:0 1.5rem; }
.hub-section h2 { font-size:1.3rem; font-weight:700; margin-bottom:1.25rem; }
.hub-blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.hub-blog-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.25rem; text-decoration:none; color:var(--text-main); transition:border-color .2s; }
.hub-blog-card:hover { border-color:var(--accent); }
.hub-blog-card__cat { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); margin-bottom:.4rem; }
.hub-blog-card__title { font-size:.9rem; font-weight:600; line-height:1.4; color:var(--text-main); }

@media(max-width:768px) {
    .hub-grid { grid-template-columns:1fr; }
    .hub-blog-grid { grid-template-columns:1fr; }
    .hub-hero h1 { font-size:1.5rem; }
}
:root.theme-dark .hub-card {
    border-color:var(--border);
}
:root.theme-dark .hub-blog-card {
    border-color:var(--border);
}

/* Dark mode parity (Sprint 5 V6b.5 Phase 1 - parite OS) */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) .hub-card {
    border-color:var(--border);
}
    :root:not(.theme-light) .hub-blog-card {
    border-color:var(--border);
}
}

/* hub-hero override pastel light supprime Phase 1 V7-14 : consolide en bloc unifie style.css fin. */

/* V8.34.0 H-VIS-02 : selecteur Particulier/Professionnel sur generateur_med.html.
   Le template importe calculators.css mais PAS mediation.css ou les rules
   .med-type-selector / .med-type-pill etaient definies -> rendu OS-default beige.
   Copie des rules canoniques de css/site/02-features/mediation.css avec parite
   light/dark stricte (doctrine projet : tokens var() only, jamais hex hardcode). */
.med-type-selector {
    display: inline-flex;
    gap: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 1rem;
}
.med-type-selector--small {
    margin-bottom: 0.75rem;
}
.med-type-pill {
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.med-type-pill:hover {
    color: var(--text-main);
}
.med-type-pill--active {
    background: var(--primary);
    color: var(--text-on-primary);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 30%, transparent);
}

} /* end @layer legacy */