/* =====================================================================
   OPTITECH : pages « Demander un devis », FAQ et Rendez-vous (v6)
   Couleurs de l'identité : --blue, --darkblue, --yellow (global.css)
   ===================================================================== */
.pux_page{ width: min(95%, 1180px); margin: 32px auto 0; }
.pux_page *{ transition: none; }
.pux_intro{ font-size: 17px; line-height: 1.6; color: #33405c; margin-bottom: 18px; }
.pux_intro strong{ font-size: inherit; color: var(--darkblue); }
.pux_carte{ background: #fff; border: 1px solid #e3eaf6; border-radius: 18px; padding: 22px; }
.pux_carte h2{ font-size: 20px; font-weight: 800; color: var(--darkblue); margin-bottom: 10px; }
.pux_carte p{ font-size: 15px; line-height: 1.55; color: #4a5568; }
.pux_carte_bleue{ background: linear-gradient(135deg, var(--darkblue), var(--blue)); border: none; }
.pux_carte_bleue h2, .pux_carte_bleue p{ color: #fff; }
.pux_etapes{ padding-left: 20px; display: grid; gap: 10px; }
.pux_etapes li, .pux_etapes strong{ font-size: 15px; line-height: 1.5; color: #33405c; }
.pux_etapes strong{ color: var(--darkblue); }
.pux_boutons{ display: grid; gap: 8px; margin-top: 14px; }
.pux_btn{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 700; font-size: 15px; }
.pux_btn i{ color: #fff; font-size: 20px; }
.pux_btn:hover{ background: #fff; color: var(--darkblue); }
.pux_btn:hover i{ color: var(--darkblue); }
.pux_btn_wa{ background: #1fa855; border-color: #1fa855; }

/* Demander un devis */
.pux_devis{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.pux_devis_aside{ display: grid; gap: 16px; position: sticky; top: 90px; }

/* FAQ */
.pux_faq{ max-width: 860px; }
.pux_recherche{ position: relative; margin-bottom: 24px; }
.pux_recherche i{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--blue); }
.pux_recherche input{ width: 100%; min-height: 54px; padding: 0 16px 0 48px; border: 1px solid #c9d3e6; border-radius: 999px; font-size: 16px; background: #fff; }
.pux_recherche input:focus{ outline: 3px solid rgba(2,73,174,.2); border-color: var(--blue); }
.pux_faq_vide{ text-align: center; color: #4a5568; margin-bottom: 20px; }
.pux_faq_groupe{ margin-bottom: 28px; }
.pux_faq_groupe[hidden], .pux_faq_item[hidden]{ display: none; }
.pux_faq_groupe h2{ font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.pux_faq_item{ border: 1px solid #e3eaf6; border-radius: 14px; background: #fff; margin-bottom: 10px; }
.pux_faq_item[open]{ border-color: var(--blue); box-shadow: 0 8px 22px rgba(0,23,61,.06); }
.pux_faq_item summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; font-size: 16px; font-weight: 700; color: var(--darkblue); }
.pux_faq_item summary::-webkit-details-marker{ display: none; }
.pux_faq_item summary i{ flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8f0ff; color: var(--blue); font-size: 18px; transition: transform .2s; }
.pux_faq_item[open] summary i{ transform: rotate(45deg); background: var(--yellow); color: var(--darkblue); }
.pux_faq_item p{ padding: 0 18px 18px; font-size: 15px; line-height: 1.65; color: #4a5568; }
.pux_faq_question{ margin-top: 12px; }
.pux_faq_question .form_universel{ margin-top: 14px; width: 100%; }
.pux_faq_question .flexBtn{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Rendez-vous */
.rdv_intro{ max-width: 760px; margin: 0 auto 8px; text-align: center; font-size: 17px; line-height: 1.55; color: #33405c; }
.rdv_intro strong{ font-size: inherit; color: var(--darkblue); }
.rdv_etapes{ padding-left: 20px; display: grid; gap: 8px; margin: 10px 0; }
.rdv_etapes li, .rdv_etapes strong{ color: var(--white); font-size: 15px; line-height: 1.5; }
.rdv fieldset{ border: none; margin-bottom: 18px; min-width: 0; }
.rdv legend{ font-size: 17px; font-weight: 800; color: var(--darkblue); margin-bottom: 12px; }
.rdv_dates{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; max-height: 340px; overflow-y: auto; padding: 2px; }
.rdv_creneau{ position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #c9d3e6; border-radius: 14px; background: #fff; cursor: pointer; }
.rdv_creneau:hover{ border-color: var(--blue); }
.rdv_creneau input{ position: absolute; opacity: 0; pointer-events: none; }
.rdv_creneau:has(input:checked){ border-color: var(--blue); background: #e8f0ff; box-shadow: 0 0 0 2px var(--blue) inset; }
.rdv_creneau:has(input:focus-visible){ outline: 3px solid var(--yellow); outline-offset: 2px; }
.rdv_jour{ font-weight: 800; color: var(--darkblue); font-size: 15px; }
.rdv_heures{ display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #4a5568; }
.rdv_heures i{ color: var(--blue); }
.rdv_aucun{ padding: 16px; border: 1px dashed #c9d3e6; border-radius: 14px; color: #4a5568; line-height: 1.5; }
.rdv_alternatives{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rdv_connecte{ display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #e9f9f0; margin-bottom: 14px; }
.rdv_connecte i{ font-size: 20px; color: #1b7f4b; }

@media (max-width: 900px){
    .pux_devis{ grid-template-columns: minmax(0, 1fr); }
    .pux_devis_aside{ position: static; }
}
@media (max-width: 560px){
    .pux_page{ width: calc(100% - 24px); margin-top: 20px; }
    .pux_carte{ padding: 18px; }
    .pux_faq_item summary{ font-size: 15px; padding: 14px; }
    .rdv_dates{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}