/* ================================================================
   WIZARD — Progress Bar, Steps, Cards, FAQ, Donate
   Extracted from mockup-nos-actions.html for Nouvelle Optique
   ================================================================ */

/* ================================================================
   PROGRESS BAR
   ================================================================ */
.wizard-progress{
  background:var(--navy-card);
  border-bottom:1px solid var(--divider);
  padding:16px 0;
  position:sticky;top:60px;z-index:1040;
}
.progress-steps{
  display:flex;align-items:center;justify-content:center;gap:0;max-width:700px;margin:0 auto;
}
.progress-step{
  display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-pill);
  font-size:.85rem;font-weight:500;color:var(--muted);transition:all .3s;cursor:default;
  white-space:nowrap;
}
.progress-step .step-num{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;background:rgba(255,255,255,.08);color:var(--muted);transition:all .3s;flex-shrink:0;
}
.progress-step .step-label{display:none}
@media(min-width:576px){.progress-step .step-label{display:inline}}
.progress-step.active{color:var(--orange)}
.progress-step.active .step-num{background:var(--orange);color:#fff}
.progress-step.done{color:var(--green)}
.progress-step.done .step-num{background:var(--green);color:#fff}
.progress-connector{
  width:40px;height:2px;background:rgba(255,255,255,.1);flex-shrink:0;transition:background .3s;
}
.progress-connector.done{background:var(--green)}

/* ================================================================
   WIZARD STEPS
   ================================================================ */
.wizard-container{
  max-width:1100px;margin:0 auto;padding:32px 16px 60px;
  position:relative;overflow:hidden;
}
.step{display:none;animation-duration:.4s;animation-fill-mode:both}
.step.active{display:block}

@keyframes slideInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
.slide-left{animation-name:slideInLeft}
.slide-right{animation-name:slideInRight}

.step-title{
  font-family:'Roboto',sans-serif;font-size:1.6rem;font-weight:700;text-align:center;margin-bottom:8px;
}
.step-subtitle{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:32px}

.btn-back{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid rgba(255,255,255,.15);color:var(--muted-light);
  padding:8px 16px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.85rem;
  font-weight:500;cursor:pointer;margin-bottom:24px;transition:all .2s;
}
.btn-back:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.25)}

/* .action-grid + .action-card* sont définies dans style.css (chargé globalement) */
.action-summary{
  max-width:500px;margin:0 auto 20px;padding:16px 20px;border-radius:12px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  font-size:14px;line-height:1.6;color:rgba(255,255,255,0.85);
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ================================================================
   STEP 2 — COUNTRY CARDS
   ================================================================ */
.selected-recap{
  display:flex;align-items:center;gap:10px;justify-content:center;
  background:var(--navy-card);padding:10px 18px;border-radius:10px;margin-bottom:24px;font-size:.85rem;
}
.selected-recap svg{width:28px;height:28px;object-fit:contain}
.selected-recap .icon-square svg{width:24px;height:24px}

.country-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media(min-width:500px){.country-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.country-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.country-grid{grid-template-columns:repeat(5,1fr)}}

.country-card{
  background:var(--navy-card);border:2px solid transparent;border-radius:var(--radius-card);
  padding:20px 14px;text-align:center;cursor:pointer;transition:all .25s;position:relative;
}
.country-card:hover{background:var(--navy-light);border-color:rgba(255,255,255,.12);transform:translateY(-2px)}
.country-card.selected{border-color:var(--orange);background:var(--navy-light)}
.country-card.selected::after{
  content:'\f058';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;top:8px;right:8px;color:var(--orange);font-size:.9rem;
}
.country-card .flag{font-size:42px;margin-bottom:8px;line-height:1}
.country-card .country-name{font-weight:600;font-size:.85rem}

/* ================================================================
   STEP 3 — PRODUCT CARDS
   ================================================================ */
.product-grid{
  display:grid;grid-template-columns:1fr;gap:16px;max-width:600px;margin:0 auto;
}
@media(min-width:600px){.product-grid{grid-template-columns:repeat(2,1fr);max-width:900px}}
@media(min-width:900px){.product-grid{grid-template-columns:repeat(3,1fr);max-width:1100px}}

.product-card{
  background:var(--navy-card);border-radius:14px;overflow:hidden;
  border:2px solid transparent;cursor:pointer;transition:all 0.25s;
}
.product-card:hover{border-color:rgba(245,166,35,0.3);transform:translateY(-2px)}
.product-card.selected{border-color:var(--orange)}
.product-card-img{width:100%;height:140px;object-fit:cover}
.product-card-body{padding:16px}
.product-card-name{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}
.product-card-detail{font-size:13px;color:var(--muted-light);margin-bottom:12px}
.product-card-amount{font-size:24px;font-weight:900;color:var(--orange);margin-bottom:12px}
.product-card-btn{
  width:100%;padding:10px;background:var(--green);color:#fff;
  border:none;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:all .2s;
}
.product-card-btn:hover{background:var(--green-hover)}

/* ================================================================
   STEP 4 — DONATE CONFIG
   ================================================================ */
.donate-recap{
  background:var(--navy-card);border-radius:var(--radius-card);padding:20px 24px;
  margin-bottom:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;
  font-size:.9rem;
}
.donate-recap .recap-item{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.06);padding:6px 14px;border-radius:8px;
}
.donate-recap .recap-item i{color:var(--orange);font-size:.8rem}

.donate-card{
  background:var(--navy-card);border-radius:var(--radius-card);padding:32px 32px 80px;
  max-width:500px;margin:0 auto;
}
.donate-toggle{
  display:flex;gap:0;margin-bottom:20px;background:rgba(255,255,255,.06);border-radius:10px;padding:4px;
}
.donate-toggle-btn{
  flex:1;padding:10px;border:none;background:none;color:var(--muted);
  font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;
  cursor:pointer;border-radius:8px;transition:all .2s;
}
.donate-toggle-btn.active{background:var(--orange);color:#fff}

.qty-selector{
  display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px;
}
.qty-btn{
  width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.15);
  background:none;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:all .2s;
}
.qty-btn:hover{border-color:var(--orange);color:var(--orange)}
.qty-value{font-size:1.8rem;font-weight:900;min-width:50px;text-align:center}

.donate-total{
  text-align:center;margin:20px 0;padding:16px;
  background:rgba(255,255,255,.04);border-radius:10px;
}
.donate-total .total-label{font-size:.85rem;color:var(--muted);margin-bottom:4px}
.donate-total .total-amount{font-size:2rem;font-weight:900;color:var(--orange)}
.donate-total .total-freq{font-size:.8rem;color:var(--muted);margin-top:2px}

.btn-validate-wrap{
  padding:12px 24px 20px;
  display:none;
  z-index:100;
}
@media(max-width:767px){
  .btn-validate-wrap{
    position:fixed;bottom:0;left:0;right:0;
    background:linear-gradient(to top,var(--navy) 70%,transparent);
  }
}
.btn-validate-wrap .btn-validate{
  max-width:500px;margin:0 auto;display:block;
}
.btn-validate{
  width:100%;padding:16px;background:var(--green);color:#fff;border:none;border-radius:12px;
  font-family:'DM Sans',sans-serif;font-size:1.1rem;font-weight:700;cursor:pointer;
  transition:all .2s;
}
.btn-validate:hover{background:var(--green-hover);transform:translateY(-1px)}

.custom-amount-row{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.custom-amount-row input{
  flex:1;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;color:#fff;font-family:'DM Sans',sans-serif;font-size:1rem;outline:none;
  transition:border-color .2s;
}
.custom-amount-row input:focus{border-color:var(--orange)}
.custom-amount-row input::placeholder{color:var(--muted)}

.unit-price-info{
  text-align:center;font-size:.85rem;color:var(--muted);margin-bottom:16px;
}
.unit-price-info span{color:var(--orange);font-weight:700}

/* Plaque field */
.plaque-field{margin:16px 0}
.plaque-field label{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:8px}
.plaque-input{width:100%;padding:12px 14px;background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.12);border-radius:10px;color:#fff;font-size:16px;font-family:'DM Sans',sans-serif;outline:none;text-align:center;letter-spacing:1px}
.plaque-input:focus{border-color:var(--orange)}
.plaque-counter{text-align:right;font-size:12px;color:var(--muted);margin-top:4px}

/* Custom info field (textarea) */
.custominfo-field{margin:16px 0}
.custominfo-field label{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:8px}
.custominfo-field textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.12);border-radius:10px;color:#fff;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;resize:vertical;line-height:1.5}
.custominfo-field textarea:focus{border-color:var(--orange)}
.custominfo-field .custominfo-help{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4;font-style:italic}
.custominfo-field .custominfo-counter{font-size:11px;color:var(--muted);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums}
body.light-mode .custominfo-field label{color:#1a1a2e}
body.light-mode .custominfo-field textarea{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:#333}
body.light-mode .custominfo-field .custominfo-help{color:#666}
body.light-mode .custominfo-field .custominfo-counter{color:#666}

/* Offrir / certificat */
.offrir-toggle{margin:16px 0;padding:16px;background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid rgba(255,255,255,0.08)}
.offrir-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--muted-light)}
.offrir-checkbox input{width:18px;height:18px;accent-color:var(--orange)}
.offrir-fields{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.offrir-input{width:100%;padding:10px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;color:#fff;font-size:14px;font-family:'DM Sans',sans-serif;outline:none}
.offrir-input:focus{border-color:var(--orange)}

/* ================================================================
   CATEGORY DESCRIPTION BLOCK
   ================================================================ */
.category-desc{max-width:1280px;margin:0 auto 32px;padding:0 16px}
.category-desc-inner{display:flex;flex-direction:column;gap:24px;background:var(--navy-card,#1d2d50);border-radius:14px;overflow:hidden}
.category-desc-img{width:100%;height:200px;overflow:hidden}
.category-desc-img img{width:100%;height:100%;object-fit:cover}
.category-desc-text{padding:0 24px 24px}
.category-desc-text h3{font-family:'Roboto',sans-serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:12px}
.category-desc-text p{font-size:15px;line-height:1.7;color:var(--muted-light,#c8d0e0)}
@media(min-width:768px){
  .category-desc-inner{flex-direction:row;align-items:stretch}
  .category-desc-img{width:40%;height:auto;min-height:200px}
  .category-desc-text{flex:1;padding:28px 32px;display:flex;flex-direction:column;justify-content:center}
  .category-desc-text h3{font-size:24px}
}

/* FAQ classes (.faq-link, .faq-section-title, .faq-item, etc.) sont définies dans style.css (chargé globalement) */

/* ================================================================
   STEP 2 — PROJECT GRID (sélection projet dans une catégorie)
   ================================================================ */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px}
.project-card-wizard{background:var(--navy-card,#1d2d50);border:2px solid transparent;border-radius:14px;overflow:hidden;cursor:pointer;transition:all 0.25s;display:flex;flex-direction:column}
.project-card-wizard:hover{transform:translateY(-2px);border-color:rgba(245,166,35,0.4)}
.project-card-wizard.selected{border-color:var(--orange)}
.project-card-img-wrap{aspect-ratio:16/9;overflow:hidden;background:#182440}
.project-card-img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.project-card-wizard:hover .project-card-img{transform:scale(1.05)}
.project-card-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.project-card-name{font-family:'Roboto',sans-serif;font-size:16px;font-weight:700;color:#fff;line-height:1.3}
.project-card-meta{display:flex;gap:14px;font-size:12px;color:rgba(255,255,255,0.6)}
.project-card-meta i{color:var(--orange);margin-right:4px}
.project-card-btn{margin-top:auto;padding:10px 14px;background:var(--orange);color:#fff;border:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s}
.project-card-btn:hover{background:var(--orange-hover);transform:translateY(-1px)}
body.light-mode .project-card-wizard{background:#fff;border-color:transparent}
body.light-mode .project-card-name{color:#1B2A4A}
body.light-mode .project-card-meta{color:#6c757d}

/* ================================================================
   STEP 4 — PRODUCT SELECTOR (sélection produit/tarif dans le don)
   ================================================================ */
.product-selector{margin-bottom:16px}
.product-selector-label{display:block;font-size:11px;font-weight:600;color:rgba(255,255,255,0.6);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px}
.product-selector-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.product-selector-option{cursor:pointer}
.product-selector-option input{display:none}
.product-selector-card{display:flex;flex-direction:column;gap:4px;padding:12px;border:2px solid rgba(255,255,255,0.12);border-radius:10px;transition:all 0.2s}
.product-selector-option input:checked + .product-selector-card{border-color:var(--orange);background:rgba(245,166,35,0.08)}
.product-selector-name{font-size:13px;font-weight:700;color:#fff}
.product-selector-detail{font-size:11px;color:rgba(255,255,255,0.6);line-height:1.3}
.product-selector-price{font-size:15px;font-weight:900;color:var(--orange);margin-top:4px}
body.light-mode .product-selector-label{color:#6c757d}
body.light-mode .product-selector-card{border-color:#dee2e6}
body.light-mode .product-selector-name{color:#1B2A4A}
body.light-mode .product-selector-detail{color:#6c757d}

/* ================================================================
   HERO ACTIONS PAGE
   ================================================================ */
.hero-actions{
  background:linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  padding:80px 16px 48px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.hero-actions .hero-eyebrow{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--orange);font-weight:600;margin-bottom:12px;
}
.hero-actions h1{
  font-family:'Roboto',sans-serif;font-size:2.4rem;font-weight:900;
  color:#fff;margin-bottom:16px;
}
.hero-actions h1 span{color:var(--orange)}
.hero-actions .hero-desc{
  font-size:1rem;color:rgba(255,255,255,.7);max-width:600px;margin:0 auto;line-height:1.6;
}
@media(min-width:768px){
  .hero-actions{padding:100px 24px 56px}
  .hero-actions h1{font-size:3rem}
}

/* Toast CSS is now in style.css (loaded globally) */

/* Flag utilities */
.flag-img{width:24px;height:18px;object-fit:cover;border-radius:2px;vertical-align:middle;display:inline-block}
.flag-heart{width:40px;height:40px;object-fit:contain;vertical-align:middle;display:inline-block}
.country-flag .flag-img{width:32px;height:24px;border-radius:3px}
.country-flag .flag-heart{width:48px;height:48px}

/* ================================================================
   LIGHT MODE OVERRIDES
   ================================================================ */
body.light-mode .hero-actions{background:linear-gradient(135deg, #e8e5dc 0%, #f0ede4 100%);border-bottom-color:rgba(0,0,0,0.06)}
body.light-mode .hero-actions h1{color:#1a1a2e}
body.light-mode .hero-actions .hero-desc{color:rgba(0,0,0,.6)}

body.light-mode .wizard-progress{background:#f2f0e4;border-bottom-color:rgba(0,0,0,.08)}
body.light-mode .progress-step{color:#999;background:#e0d9bc}
body.light-mode .progress-step .step-num{background:rgba(0,0,0,.06);color:#999}
body.light-mode .progress-step.active{color:var(--orange)}
body.light-mode .progress-step.active .step-num{background:var(--orange);color:#fff}
body.light-mode .progress-step.done{color:var(--green)}
body.light-mode .progress-step.done .step-num{background:var(--green);color:#fff}
body.light-mode .progress-connector{background:rgba(0,0,0,.08)}
body.light-mode .progress-connector.done{background:var(--green)}

body.light-mode .step-title{color:#1a1a2e}
body.light-mode .step-subtitle{color:#666}
body.light-mode .btn-back{border-color:rgba(0,0,0,.12);color:#555}
body.light-mode .btn-back:hover{background:rgba(0,0,0,.04);color:#1a1a2e;border-color:rgba(0,0,0,.2)}

/* Light mode action-card : voir style.css */

body.light-mode .country-card{background:#fff;border-color:transparent}
body.light-mode .country-card:hover{background:#f9f9f9;border-color:rgba(0,0,0,.08)}
body.light-mode .country-card.selected{border-color:var(--orange);background:#fff8ed}

body.light-mode .product-card{background:#fff}
body.light-mode .product-card:hover{border-color:rgba(245,166,35,0.3)}
body.light-mode .product-card.selected{border-color:var(--orange)}
body.light-mode .product-card-name{color:#1a1a2e}
body.light-mode .product-card-detail{color:#555}

body.light-mode .selected-recap{background:#fff;color:#1a1a2e}
body.light-mode .donate-recap{background:#fff;color:#1a1a2e}
body.light-mode .donate-recap .recap-item{background:rgba(0,0,0,.04)}
body.light-mode .action-summary{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08);color:#555}
@media(max-width:767px){body.light-mode .btn-validate-wrap{background:linear-gradient(to top,#e0d9bc 60%,transparent)}}
body.light-mode .donate-card{background:#fff;color:#1a1a2e}
body.light-mode .donate-toggle{background:rgba(0,0,0,.04)}
body.light-mode .donate-toggle-btn{color:#888}
body.light-mode .donate-toggle-btn.active{background:var(--orange);color:#fff}
body.light-mode .qty-btn{border-color:rgba(0,0,0,.15);color:#1a1a2e}
body.light-mode .qty-btn:hover{border-color:var(--orange);color:var(--orange)}
body.light-mode .qty-value{color:#1a1a2e}
body.light-mode .donate-total{background:rgba(0,0,0,.03)}
body.light-mode .donate-total .total-label{color:#888}
body.light-mode .donate-total .total-freq{color:#888}
body.light-mode .unit-price-info{color:#888}
body.light-mode .custom-amount-row input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:#1a1a2e}
body.light-mode .custom-amount-row input::placeholder{color:#999}
body.light-mode .custom-amount-row input:focus{border-color:var(--orange)}
body.light-mode .plaque-field label{color:#1a1a2e}
body.light-mode .plaque-input{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#333}
body.light-mode .offrir-toggle{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06)}
body.light-mode .offrir-checkbox{color:#555}
body.light-mode .offrir-input{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#333}

body.light-mode .category-desc-inner{background:#fff}
body.light-mode .category-desc-text h3{color:#1a1a2e}
body.light-mode .category-desc-text p{color:#555}

/* Light mode FAQ classes : voir style.css */