/* JM 04/11/2026 : parcours d'achat (tarifs, pages d'offres, tunnel à 8 choix, barre d'appel sur téléphone) */

/* barre d'appel fixe sur téléphone, posée sur toutes les pages sauf le tunnel */
.barre-mobile{ display:none; }
@media (max-width:760px){
  body{ padding-bottom:76px; }
  body.page-tunnel{ padding-bottom:0; }
  .barre-mobile{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(3,8,21,.92); border-top:1px solid rgba(140,190,255,.22);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Arial,sans-serif; }
  .page-tunnel .barre-mobile{ display:none; }
  .barre-mobile a{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; border-radius:14px; font-size:15px; font-weight:700;
    color:#f3f7ff; text-decoration:none; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(140,190,255,.22); white-space:nowrap; }
  .barre-mobile a.devis{ background:linear-gradient(90deg,#3fe0ff,#3b82f6 45%,#8b5cf6 75%,#d24dff); box-shadow:none; color:#fff; }
  .barre-mobile svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
}

/* boutons du héros des pages intérieures */
.heros-page .actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.heros-page .garanties{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; list-style:none; padding:0; margin:22px 0 0; color:var(--doux); font-size:15px; }
.heros-page .garanties li::before{ content:"✓"; color:var(--cyan); font-weight:800; margin-right:7px; }

/* cartes de prix (reprennent .offre de l'accueil) */
.offres + .options, .offres + .action-groupe{ margin-top:22px; }
.offre .prix strong small{ display:inline; font-size:16px; color:var(--doux); font-weight:600; letter-spacing:0; }
.offre .prix-lien{ margin-top:auto; }
.offre .liste + .bouton, .offre .prix + .bouton{ margin-top:auto; }
.options{ padding:22px 24px; }
.options h3{ font-size:19px; margin-bottom:12px; }
.options ul{ list-style:none; margin:0; padding:0; }
.options li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; padding:11px 0; border-top:1px solid var(--bord); color:#dbe6ff; font-size:15.5px; }
.options li:first-child{ border-top:0; }
.options li span{ flex:1 1 220px; }
.options li strong{ color:#fff; white-space:nowrap; }
.options li small{ display:block; color:var(--pale); font-size:13.5px; }
.action-groupe{ text-align:center; margin-top:26px; }
.note-tarifs{ color:var(--doux); font-size:15px; }
.note-tarifs strong{ color:#fff; }
.lien-fleche{ color:var(--cyan); font-weight:700; text-decoration:none; }
.lien-fleche:hover{ text-decoration:underline; }

/* texte courant des pages d'offres */
.texte-offre{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; }
.texte-offre .verre h3{ font-size:18px; margin-bottom:8px; }
.texte-offre .verre p{ color:var(--doux); font-size:15.5px; }
.etapes-courtes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:18px; counter-reset:etape; }
.etapes-courtes li{ counter-increment:etape; }
.etapes-courtes li::before{ content:counter(etape); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; margin-bottom:12px;
  font-weight:800; color:#fff; background:linear-gradient(90deg,#4f6bff,#a44dff); }
.etapes-courtes h3{ font-size:17px; margin-bottom:6px; }
.etapes-courtes p{ color:var(--doux); font-size:15px; }
.faq-page{ display:grid; gap:12px; max-width:860px; }
.faq-page details{ padding:0; }
.faq-page summary{ cursor:pointer; padding:18px 22px; font-weight:700; font-size:16.5px; list-style:none; }
.faq-page summary::-webkit-details-marker{ display:none; }
.faq-page summary::after{ content:"+"; float:right; color:var(--cyan); font-weight:800; margin-left:12px; }
.faq-page details[open] summary::after{ content:"−"; }
.faq-page details p{ padding:0 22px 18px; color:var(--doux); font-size:15.5px; }
.faq-page details a{ color:var(--cyan); }

/* page Contact */
.moyens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:18px; }
.moyen{ display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; }
.moyen h3{ font-size:18px; }
.moyen p{ color:var(--doux); font-size:15px; }
.moyen b{ margin-top:auto; padding-top:8px; color:var(--cyan); font-size:16px; }
.form-contact{ max-width:760px; display:grid; gap:14px; }
.form-contact .champ{ display:grid; gap:6px; }
.form-contact label{ font-weight:600; font-size:15px; }
.form-contact input, .form-contact textarea{ width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--bord); background:rgba(3,8,21,.6); color:#fff; font:inherit; font-size:16px; }
.form-contact input:focus, .form-contact textarea:focus{ outline:2px solid var(--cyan); outline-offset:1px; }
.form-contact [aria-invalid="true"]{ border-color:#ff6b8a; }
.form-contact .accord{ display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--doux); font-size:14.5px; }
.form-contact .accord input{ width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--cyan); }
.form-contact .accord a{ color:var(--cyan); }
.form-contact .erreur{ color:#ff9db1; }
.form-contact .merci-contact{ color:#fff; font-weight:700; }
.piege{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* tunnel à 8 choix : grille de 2 colonnes sur PC */
.choix.large{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.choix.large label{ padding:16px 18px; }
.choix.large .tarif{ font-size:15px; }
.choix label > div{ min-width:0; }
.choix-services{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); margin-bottom:18px; }
.choix-services label{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:12px; border:1px solid var(--bord); cursor:pointer; font-size:15px; }
.choix-services label:has(input:checked){ border-color:var(--cyan); background:rgba(63,224,255,.08); }
.choix-services input{ accent-color:var(--cyan); width:17px; height:17px; flex:none; }
@media (max-width:480px){
  .options{ padding:18px 16px; }
  .offre .prix strong{ font-size:38px; }
  .choix .tarif{ margin-left:0; }
  .choix.large label{ flex-wrap:wrap; }
  .choix.large label > div{ flex:1 1 calc(100% - 40px); }
  .choix.large .tarif{ padding-left:32px; }
}
.offre .lien-detail{ align-self:center; margin-top:14px; font-size:14.5px; }
.offre .bouton + .lien-detail{ margin-top:14px; }
/* robot d'accueil des fiches : au-dessus de la barre d'appel sur téléphone */
@media (max-width:760px){ :root{ --ga-bas:calc(84px + env(safe-area-inset-bottom)); } }
/* tunnel : le titre de l'étape ne passe pas sous l'en-tête collant */
.etape-form legend, .etape-form{ scroll-margin-top:96px; }
/* fiches services : elles ont déjà leur barre « Commander » (commande-20261031) */
@media (max-width:760px){
  body:has(.cx-barre) .barre-mobile{ display:none; }
  body:has(.cx-barre){ padding-bottom:0; }
  :root:has(.cx-barre){ --ga-bas:14px; }
}
/* barre d'appel sur petit téléphone */
@media (max-width:360px){
  .barre-mobile{ gap:6px; padding-inline:8px; }
  .barre-mobile a{ font-size:14px; gap:5px; }
  .barre-mobile svg{ width:16px; height:16px; }
}