/*
 * Parcours de demande de devis (tunnel CF7 « contact_entreprise_V2 », classes .tunnel-solaire-wrapper,
 * .tuiles-options…) — refonte visuelle du 2026-10-02, à la demande de Gomes : plus large, plus visible.
 *
 * Ni le formulaire CF7 (#127340) ni le CSS personnalisé de WordPress (#108598, qui porte le style
 * d'origine du parcours) ne sont modifiés : cette feuille passe par-dessus, tout est rangé sous
 * .tunnel-solaire-wrapper. Retour arrière : PVSE_TUNNEL_2026 = 'ancien' (functions.php).
 * Sauvegardes : /root/pvsolaire-site/archives-devis/2026-10-02-avant-tunnel/.
 */

.tunnel-solaire-wrapper{
  --tu-orange:#fd5902; --tu-orange-dark:#d94901; --tu-orange-soft:#fff3e8; --tu-orange-line:#ffd2b3;
  --tu-ink:#1a1a1a; --tu-text:#334155; --tu-gray:#64748b; --tu-line:#e7e0d8;
  max-width:none !important; width:100% !important;
  font-family:'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Largeur : plus de place pour les tuiles ---------- */
.pvse-devis .pvse-form-card{ max-width:1040px !important; padding:38px 44px !important; }
#demande-de-devis .tunnel-solaire-wrapper{ max-width:none !important; }

/* ---------- Barre de progression ---------- */
.tunnel-solaire-wrapper .progress-container{ margin:6px 0 30px !important; padding:16px 18px; background:#faf6f2; border-radius:16px; }
.tunnel-solaire-wrapper .progress-text{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px !important; font-size:12.5px !important; color:var(--tu-gray) !important; letter-spacing:.06em; }
.tunnel-solaire-wrapper .progress-text span{ display:inline-block; min-width:44px; text-align:center; padding:3px 10px; border-radius:999px; background:var(--tu-orange) !important; color:#fff !important; font-size:12.5px; }
.tunnel-solaire-wrapper .form-progress-bar{ height:10px !important; background:#ece4dc !important; border-radius:999px !important; }
.tunnel-solaire-wrapper .progress-fill{
  background:linear-gradient(90deg,#fd5902 0%,#ff9d4d 100%) !important; border-radius:999px;
  box-shadow:0 2px 8px rgba(253,89,2,.35); transition:width .45s cubic-bezier(.4,0,.2,1) !important;
}

/* ---------- Titres et libellés ---------- */
.tunnel-solaire-wrapper .step-title h2,
.tunnel-solaire-wrapper .step-title h3{ font-family:inherit; font-size:clamp(21px,2.3vw,26px) !important; color:var(--tu-ink) !important; letter-spacing:-.01em; margin-bottom:16px !important; }
.tunnel-solaire-wrapper .form-step .input-block label strong{ font-size:17px !important; color:var(--tu-ink) !important; margin-bottom:12px !important; }
.tunnel-solaire-wrapper .form-step label{ color:var(--tu-text) !important; }
.tunnel-solaire-wrapper .form-step > .step-subtitle:first-child{ border-radius:14px !important; }

/* ---------- Tuiles de choix ---------- */
.tunnel-solaire-wrapper .tuiles-options{ gap:14px !important; }
.tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item-label{
  min-height:128px !important; padding:16px 12px !important; gap:2px;
  background:#fff !important; border:2px solid var(--tu-line) !important; border-radius:18px !important;
  font-size:15px !important; font-weight:600 !important; color:var(--tu-ink) !important; text-align:center; line-height:1.3 !important;
  box-shadow:0 1px 2px rgba(26,26,26,.04), 0 6px 16px rgba(26,26,26,.05) !important;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
/* Icône dans une pastille ronde */
.tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item-label::before{
  width:54px; height:54px; border-radius:50%; display:flex !important; align-items:center; justify-content:center;
  background:var(--tu-orange-soft); color:var(--tu-orange-dark) !important; font-size:28px !important; margin:0 0 10px !important;
  transition:background-color .15s ease, color .15s ease !important;
}
.tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item:hover .wpcf7-list-item-label{
  border-color:#ffb98a !important; background:#fffaf6 !important; transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(26,26,26,.05), 0 14px 28px rgba(253,89,2,.12) !important;
}
/* Choix sélectionné : tuile pêche clair (orange vif adouci le 2026-10-02). « html body » : la page devis imprime ses propres règles
   :checked (texte orange) dans le <body>, APRÈS cette feuille — à poids égal elles gagneraient. */
html body .tunnel-solaire-wrapper .tuiles-options input[type="radio"]:checked + .wpcf7-list-item-label,
html body .tunnel-solaire-wrapper .tuiles-options input[type="checkbox"]:checked + .wpcf7-list-item-label{
  /* Adouci le 2026-10-02 (« orange un peu trop vif ») : pêche clair, bordure et icône orange */
  background:linear-gradient(135deg,#fff1e6 0%,#ffe4d1 100%) !important; border-color:#ff9a5c !important;
  color:#a8430c !important; box-shadow:0 10px 24px rgba(253,89,2,.14) !important; transform:translateY(-2px);
}
html body .tunnel-solaire-wrapper .tuiles-options input[type="radio"]:checked + .wpcf7-list-item-label::before,
html body .tunnel-solaire-wrapper .tuiles-options input[type="checkbox"]:checked + .wpcf7-list-item-label::before,
html body .tunnel-solaire-wrapper .op-couverture .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label::before{
  background:#ff8a4c; color:#fff !important;
}
/* Coche en haut à droite de la tuile choisie */
.tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item{ position:relative; }
.tunnel-solaire-wrapper .tuiles-options input:checked ~ .wpcf7-list-item-label{ position:relative; }
.tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item:has(input:checked)::after{
  content:""; position:absolute; top:10px; right:10px; z-index:3; width:24px; height:24px; border-radius:50%; pointer-events:none;
  background:#ff8a4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
  box-shadow:0 2px 6px rgba(217,73,1,.25);
}
/* « PROPRIÉTAIRE » sous les tuiles de l'étape 1 */
.tunnel-solaire-wrapper .op-logement .wpcf7-list-item-label::after{ border-radius:999px !important; padding:3px 9px !important; }
html body .tunnel-solaire-wrapper .op-logement input[type="radio"]:checked + .wpcf7-list-item-label::after{ background:#ffd2b3 !important; color:#a8430c !important; }

/* ---------- Champs de saisie ---------- */
.tunnel-solaire-wrapper .form-input{
  border:2px solid var(--tu-line) !important; border-radius:14px !important; background:#fff !important;
  font-family:inherit; color:var(--tu-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tunnel-solaire-wrapper .form-input:focus{ border-color:var(--tu-orange) !important; box-shadow:0 0 0 4px rgba(253,89,2,.14) !important; }
.tunnel-solaire-wrapper textarea.form-input{ height:auto !important; min-height:110px; }

/* ---------- Carte « potentiel solaire » (analyse de toiture) ---------- */
.tunnel-solaire-wrapper .pvse-solar-card{ border-radius:20px !important; }

/* ---------- Boutons Précédent / Suivant ---------- */
.tunnel-solaire-wrapper .custom-form-navigation{ border-top:1px solid #f1ebe4 !important; padding-top:24px !important; margin-top:28px !important; gap:12px; }
.tunnel-solaire-wrapper .btn-nav-step{
  border-radius:14px !important; padding:15px 30px !important; font-size:16px !important; font-family:inherit;
  display:inline-flex; align-items:center; gap:8px; line-height:1.2;
}
.tunnel-solaire-wrapper .btn-next-step{
  margin-left:auto; background:linear-gradient(135deg,#fd5902 0%,#ff7a29 100%) !important; border:0 !important; color:#fff !important;
  box-shadow:0 12px 26px rgba(253,89,2,.32) !important;
}
.tunnel-solaire-wrapper .btn-next-step:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(253,89,2,.42) !important; }
.tunnel-solaire-wrapper .btn-prev-step{ background:#fff !important; border:2px solid var(--tu-line) !important; color:var(--tu-text) !important; }
.tunnel-solaire-wrapper .btn-prev-step:hover{ border-color:var(--tu-orange) !important; color:var(--tu-orange-dark) !important; }

/* ---------- Envoi final ---------- */
.tunnel-solaire-wrapper .verify-sms-btn-custom,
.tunnel-solaire-wrapper .wpcf7-submit{ border-radius:14px !important; padding:17px !important; font-size:17px !important; }

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .pvse-devis .pvse-form-card{ padding:22px 14px !important; }
  .tunnel-solaire-wrapper .progress-container{ padding:12px 14px; margin-bottom:22px !important; }
  /* Le CSS d'origine passe les tuiles en lignes (icône à gauche) : on garde, avec la pastille */
  .tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item-label{ min-height:72px !important; padding:12px 14px !important; text-align:left; }
  .tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item-label::before{ width:44px; height:44px; font-size:24px !important; margin:0 14px 0 0 !important; flex:none; }
  .tunnel-solaire-wrapper .op-logement .wpcf7-list-item-label::before{ margin:0 0 6px !important; }
  .tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item:has(input:checked)::after{ top:50%; transform:translateY(-50%); right:14px; }
  .tunnel-solaire-wrapper .btn-nav-step{ padding:14px 20px !important; font-size:15px !important; }
}

@media (prefers-reduced-motion:reduce){
  .tunnel-solaire-wrapper *{ transition:none !important; }
}

/* L'icône « heat_pump » n'existe pas dans la version de Material Icons chargée par le site : carré vide */
.tunnel-solaire-wrapper .op-equipements .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::before{ content:"thermostat" !important; }

/* ---------- Vue de la toiture (analyse solaire) ----------
   Image ~1100 × 800 px affichée à 100 % de la largeur : avec le parcours élargi elle dépassait 650 px de
   haut (remarque de Gomes, 2026-10-02). Limitée à 460 px de large et centrée sur ordinateur. */
.tunnel-solaire-wrapper .pvse-solar-visuel{ text-align:center; }
.tunnel-solaire-wrapper .pvse-solar-visuel img{ max-width:460px; margin:0 auto; border-radius:14px !important; }
.tunnel-solaire-wrapper .pvse-solar-visuel .pvse-solar-legende{ max-width:460px; margin-left:auto !important; margin-right:auto !important; text-align:center; }
@media (max-width:767px){
  .tunnel-solaire-wrapper .pvse-solar-visuel img,
  .tunnel-solaire-wrapper .pvse-solar-visuel .pvse-solar-legende{ max-width:100%; }
}

/* Icônes centrées dans leur pastille. L'étape « Type de couverture » a une règle d'origine
   (CSS personnalisé #108598 : .op-couverture … ::before { display:block !important; text-align:center … })
   de même poids que la nôtre et chargée après : l'icône retombait en haut à gauche du rond. */
html body .tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item .wpcf7-list-item-label::before{
  display:flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important; text-align:center !important; padding:0 !important; box-sizing:border-box;
  color:var(--tu-orange-dark) !important; /* l'étape couverture les laissait en gris */
}
@media (max-width:767px){
  html body .tunnel-solaire-wrapper .tuiles-options .wpcf7-list-item .wpcf7-list-item-label::before{ font-size:24px !important; }
}

/* ---------- Vérification anti-robot (Cloudflare Turnstile) ----------
   Le widget est une iframe Cloudflare (300 × 65 px), non stylable : on habille son emplacement.
   L'en-tête (.pa-ts-intro) est ajouté par inc/tunnel-2026.php. */
.tunnel-solaire-wrapper .cloudflare-wrapper{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 24px;
  margin:24px 0 14px !important; padding:16px 18px; border-radius:18px;
  background:linear-gradient(135deg,#fff7f0 0%,#fffbf8 100%); border:1px solid #ffe2cc;
}
.tunnel-solaire-wrapper .pa-ts-intro{ display:flex; align-items:center; gap:14px; flex:1 1 260px; min-width:0; }
.tunnel-solaire-wrapper .pa-ts-ico{
  flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #ffd2b3; color:#d94901; box-shadow:0 4px 12px rgba(217,73,1,.08);
}
.tunnel-solaire-wrapper .pa-ts-intro strong{ display:block; font-size:15.5px; color:#1a1a1a; line-height:1.3; }
.tunnel-solaire-wrapper .pa-ts-intro div span{ display:block; font-size:13.5px; color:#6b5f55; line-height:1.45; margin-top:2px; }
.tunnel-solaire-wrapper .cloudflare-wrapper .cf-turnstile{ flex:none; min-height:65px; }
.tunnel-solaire-wrapper .cloudflare-wrapper .cf-turnstile iframe{ border-radius:10px; }
@media (max-width:767px){
  .tunnel-solaire-wrapper .cloudflare-wrapper{ padding:14px; justify-content:center; }
  .tunnel-solaire-wrapper .cloudflare-wrapper .cf-turnstile{ margin:0 auto; }
}