/*
 * AV Tunnel — supplemental styles for AV-specific components (Step 3 Objectives
 * multi-select cards, appetence strip, and later AV additions).
 *
 * Loads AFTER scpi-tunnel CSS so it inherits typography/colors and overrides
 * only the AV-new pieces. CSS classes use the `av-tunnel-*` prefix so they
 * never collide with SCPI's scpi-tunnel-*.
 */

/* --- Step 3 sections: tighten + give breathing room ---------------- */
.av-tunnel-form--step3 .scpi-tunnel-section {
    margin: 22px 0;
    padding: 18px 20px;
    background: #FAFBFC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}
.av-tunnel-form--step3 .scpi-tunnel-section > h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
.av-tunnel-form--step3 .scpi-tunnel-section > p.scpi-tunnel-field__hint {
    margin: 0 0 14px;
    font-size: 13px;
    color: #6B7280;
}
.av-tunnel-form--step3 .scpi-tunnel-section > label {
    display: block;
    margin: 8px 0;
}
.av-tunnel-form--step3 .scpi-tunnel-section > label > span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.av-tunnel-form--step3 .scpi-tunnel-section input[type="text"],
.av-tunnel-form--step3 .scpi-tunnel-section select,
.av-tunnel-form--step3 .scpi-tunnel-section textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    box-sizing: border-box;
}
.av-tunnel-form--step3 .scpi-tunnel-section textarea {
    min-height: 80px;
    resize: vertical;
}

/* --- Multi-select card grid (objectives, supports) ----------------- */
.av-tunnel-multiselect {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.av-tunnel-multiselect__card {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    user-select: none;
    margin: 0 !important;
}
.av-tunnel-multiselect__card:hover {
    border-color: #9CA3AF;
    background: #F9FAFB;
}
.av-tunnel-multiselect__card input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1B2A4A;
    cursor: pointer;
}
.av-tunnel-multiselect__card span {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.35;
    color: #111827;
}
.av-tunnel-multiselect__card.is-selected {
    border-color: #1B2A4A;
    background: #EEF2FA;
    box-shadow: 0 0 0 1px #1B2A4A inset;
}
.av-tunnel-multiselect__card.is-selected span {
    font-weight: 600;
    color: #1B2A4A;
}

/* --- Appetence-au-risque strip (1..5) ------------------------------ */
.av-tunnel-slider {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin: 6px 0 4px;
}
.av-tunnel-slider .scpi-tunnel-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    font-size: 13px;
    line-height: 1.25;
    color: #374151;
    margin: 0;
}
.av-tunnel-slider .scpi-tunnel-radio:hover {
    border-color: #9CA3AF;
    background: #F9FAFB;
}
.av-tunnel-slider .scpi-tunnel-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.av-tunnel-slider .scpi-tunnel-radio:has(input:checked) {
    border-color: #1B2A4A;
    background: #EEF2FA;
    color: #1B2A4A;
    font-weight: 600;
    box-shadow: 0 0 0 1px #1B2A4A inset;
}

/* --- Autosave status: collapse when empty (av-tunnel-15) -----------------
   The status region inherits min-height + padding + a top border from
   .scpi-tunnel-modal__status. When it holds no message (e.g. after the
   "Enregistré" feedback fades) that reserved height showed as an empty white
   bar under the funnel body. Collapse it while empty; the full styling still
   applies whenever it shows text ("Enregistrement..." / "Enregistré" / error).
   AV-only (#av-tunnel-status); the SCPI funnel is untouched. */
#av-tunnel-status:empty {
    min-height: 0;
    padding: 0;
    border-top: 0;
}

/* --- Card-selector responsive grid (Step 2 horizon) ----------------
   Overrides the base column flex so 6 descriptive horizon cards lay out
   2-3 per row instead of one tall stack. Selected-state styling + the
   data-active sync come from the shared .scpi-tunnel-cardselect rules. */
.scpi-tunnel-cardselect--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* --- Horizon radios (vertical stack, accent on selected) ----------- */
.av-tunnel-form--step3 .scpi-tunnel-section > .scpi-tunnel-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    margin: 6px 0;
    font-size: 14px;
    color: #111827;
}
.av-tunnel-form--step3 .scpi-tunnel-section > .scpi-tunnel-radio:hover {
    border-color: #9CA3AF;
    background: #F9FAFB;
}
.av-tunnel-form--step3 .scpi-tunnel-section > .scpi-tunnel-radio input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    accent-color: #1B2A4A;
}
.av-tunnel-form--step3 .scpi-tunnel-section > .scpi-tunnel-radio:has(input:checked) {
    border-color: #1B2A4A;
    background: #EEF2FA;
    font-weight: 600;
    color: #1B2A4A;
    box-shadow: 0 0 0 1px #1B2A4A inset;
}

/* --- Error message slot -------------------------------------------- */
.av-tunnel-form--step3 .scpi-tunnel-error.is-visible {
    display: block;
    margin-top: 6px;
    color: #B91C1C;
    font-size: 12px;
}

/* --- Section title at top of step 3 -------------------------------- */
.av-tunnel-form--step3 .scpi-tunnel-step__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}
.av-tunnel-form--step3 .scpi-tunnel-step__intro {
    margin: 0 0 16px;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.5;
}

/* ============================================================
 * av-tunnel-45 : ecran d'intro "approche" (non numerote).
 * Classes .av-intro-* uniques (pas de collision). Marque : navy #07124A,
 * orange #F18815 / #F9A23E / #E0700E, tint #FFF4ED, bordure #FADFCE, ligne #E8ECF6.
 * ============================================================ */
#av-tunnel-modal.av-intro-active .scpi-tunnel-modal__progress{ display:none; }
/* av-tunnel-48 : mise en page aeree + zonee (en-tete / spectre / description / action)
   et bouton Continuer pleine largeur. Style-only (aucun changement de comportement). */
.av-intro-body{padding:14px 46px 40px}
.av-intro-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#F18815;text-align:center}
.av-intro-h{font-size:1.65rem;font-weight:800;color:#07124A;letter-spacing:-.02em;text-align:center;margin:13px 0 11px;line-height:1.14}
.av-intro-sub{font-size:.92rem;color:#71799A;text-align:center;max-width:44ch;margin:0 auto;line-height:1.55}
.av-intro-div{height:1px;background:#E8ECF6;margin:34px 0}
.av-intro-spec-wrap{padding:2px 8px 0}
.av-intro-labels{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9AA3BF;margin-bottom:22px}
.av-intro-labels span.on{color:#E0700E}
.av-intro-spec{position:relative;height:48px;margin:0 14px}
.av-intro-track{position:absolute;left:4%;right:4%;top:22px;height:6px;border-radius:4px;background:linear-gradient(90deg,#dbe1f2,#f3d3ba,#F18815)}
.av-intro-stop{position:absolute;top:11px;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #cfd6ea;transform:translateX(-50%);cursor:pointer;transition:.12s;z-index:1;padding:0;appearance:none;-webkit-appearance:none}
.av-intro-stop:hover{border-color:#F9A23E;transform:translateX(-50%) scale(1.08)}
.av-intro-stop.on{border-color:#F18815;border-width:4px;box-shadow:0 0 0 6px rgba(241,136,21,.16);width:30px;height:30px;top:9px}
.av-intro-desc{margin-top:32px;border-radius:16px;padding:18px 20px;display:flex;gap:15px;align-items:flex-start;transition:.15s}
.av-intro-desc--empty{background:#f6f8fc;border:1px dashed #dbe1ee}
.av-intro-desc--filled{background:#FFF4ED;border:1px solid #FADFCE}
.av-intro-sbub{width:46px;height:46px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;transition:.15s}
.av-intro-desc--empty .av-intro-sbub{background:#e6eaf3}
.av-intro-desc--filled .av-intro-sbub{background:#F18815}
.av-intro-sbub svg{width:23px;height:23px;stroke-width:1.9;fill:none}
.av-intro-desc--empty .av-intro-sbub svg{stroke:#9AA3BF}
.av-intro-desc--filled .av-intro-sbub svg{stroke:#fff}
.av-intro-name{font-weight:800;font-size:1.05rem;color:#07124A}
.av-intro-txt{font-size:.86rem;color:#5b6688;line-height:1.5;margin-top:4px}
.av-intro-desc--empty .av-intro-name{color:#71799A}
.av-intro-desc--empty .av-intro-txt{color:#9AA3BF}
.av-intro-foot{margin-top:36px}
.av-intro-cta{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;font-size:1.05rem;font-weight:800;color:#fff;border:0;cursor:pointer;border-radius:14px;padding:18px 24px;background:linear-gradient(135deg,#F9A23E,#E0700E);box-shadow:0 16px 34px -14px rgba(224,112,14,.6);transition:transform .15s, box-shadow .15s}
.av-intro-cta:not([disabled]):hover{transform:translateY(-1px);box-shadow:0 20px 40px -14px rgba(224,112,14,.65)}
.av-intro-cta svg{width:20px;height:20px;stroke:#fff;stroke-width:2.2;fill:none}
.av-intro-cta[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
@media(max-width:560px){ .av-intro-body{padding:12px 20px 28px} }

/* Resets id-scope des <button> de l'intro (stops ronds + CTA plein) pour gagner la
   cascade face au chrome de bouton global (appearance:none + valeurs prompt 48). */
#av-tunnel-modal .av-intro .av-intro-stop{
  -webkit-appearance:none; appearance:none;
  background:#fff; border:3px solid #cfd6ea; border-radius:50%;
  width:26px; height:26px; padding:0; min-height:0; line-height:normal; box-shadow:none;
}
#av-tunnel-modal .av-intro .av-intro-stop:hover{ border-color:#F9A23E; }
#av-tunnel-modal .av-intro .av-intro-stop.on{
  border-color:#F18815; border-width:4px; width:30px; height:30px; top:9px;
  box-shadow:0 0 0 6px rgba(241,136,21,.16);
}
#av-tunnel-modal .av-intro .av-intro-cta{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; justify-content:center; gap:11px; width:100%;
  font-size:1.05rem; font-weight:800; color:#fff;
  border:0; cursor:pointer; border-radius:14px; padding:18px 24px;
  background:linear-gradient(135deg,#F9A23E,#E0700E);
  box-shadow:0 16px 34px -14px rgba(224,112,14,.6);
}
#av-tunnel-modal .av-intro .av-intro-cta[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; }
#av-tunnel-modal .av-intro .av-intro-cta svg{ width:20px; height:20px; stroke:#fff; stroke-width:2.2; fill:none; }
#av-tunnel-modal .av-intro .av-intro-cta:not([disabled]):hover{ transform:translateY(-1px); box-shadow:0 20px 40px -14px rgba(224,112,14,.65); text-decoration:none; }