/* SORTISPELLS - page contact v5 (17/10/2026). Maquette « Page contact mystique » aux couleurs du site. Mise en page construite par contact-celeste.js (.ct5). */
body#contact{overflow-x:clip;--g1:#e3b04b;--g2:#f2c45f;--g3:#f6d68c;--tx:#efe6f5;--mu:#b9a9d3;--ln:rgba(227,176,75,.4);--on:#3ddc84;--off:#94a3b8}
body#contact #wrapper{background:#140512 radial-gradient(ellipse at 50% 0,rgba(91,33,140,.35),transparent 60%)}
body#contact .main-content,body#contact #content-wrapper,body#contact .center-wrapper,body#contact #main{background:transparent!important}
body#contact .main-content{padding-bottom:70px}
body#contact .breadcrumb-wrapper{position:relative;z-index:2;background:transparent!important;border:0!important}
body#contact .breadcrumb-wrapper a,body#contact .breadcrumb-wrapper span{color:#efe6f5;font-size:15px}
body#contact .breadcrumb-wrapper .fa-home{color:#f0c060}
body#contact:not(.ct-ready) .main-content>.container{opacity:0}
body#contact .main-content>.container{transition:opacity .25s}

/* bandeau */
.ct5-hero{position:relative;width:100vw;margin:-58px 0 0 calc(50% - 50vw);padding:86px 16px 150px;text-align:center;background:linear-gradient(180deg,rgba(20,5,18,.25),rgba(20,5,18,.15) 45%,#140512 97%),radial-gradient(ellipse at 50% 45%,rgba(20,5,18,.72),rgba(20,5,18,0) 62%),url(/img/horoscope/checkout-bg.webp) center 40%/cover no-repeat}
.ct5-hero-in{max-width:760px;margin:0 auto}
.ct5-eye{margin:0 0 12px;font:600 13px/1 Montserrat,Roboto,Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--g1)}
.ct5-hero h1.page-heading{margin:0!important;padding:0!important;border:0!important;background:none!important;font-family:'Playfair Display',Georgia,serif!important;font-weight:600!important;font-size:clamp(34px,4.6vw,60px)!important;line-height:1.08!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--g3)!important;text-shadow:0 3px 22px rgba(0,0,0,.75)}
.ct5-hero h1.page-heading:before,.ct5-hero h1.page-heading:after{display:none!important;content:none!important}
.ct5-sub{margin:12px 0 0;font-family:'Playfair Display',Georgia,serif;font-size:clamp(21px,2.2vw,28px);line-height:1.3;color:#fff7ea;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.ct5-sep{display:block;width:70px;height:2px;margin:20px auto;background:linear-gradient(90deg,transparent,var(--g2),transparent)}
.ct5-intro{margin:0;font-size:18px;line-height:1.6;color:var(--tx);text-shadow:0 2px 12px rgba(0,0,0,.8)}

/* grille */
.ct5-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-areas:"form live" "form info" "form eng";grid-template-rows:auto auto 1fr;align-items:start;gap:24px;max-width:1240px;margin:-110px auto 0}
.ct5-form{grid-area:form}.ct5-live{grid-area:live}.ct5-info{grid-area:info;display:grid;grid-template-columns:1fr 1fr;gap:24px}.ct5-eng{grid-area:eng}

/* cartes */
.ct5-card{padding:28px 28px 26px;border:1px solid var(--ln);border-radius:20px;background:linear-gradient(180deg,rgba(40,16,62,.95),rgba(18,7,32,.96));box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,230,170,.08);color:var(--tx)}
.ct5-head{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.ct5-h,.ct5-ft{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:22px;line-height:1.25;color:var(--g3);text-transform:none;letter-spacing:0}
.ct5-ft{font-size:27px}
.ct5-fi{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--mu)}
.ct5-ico{flex:none;width:32px;height:32px;background:center/contain no-repeat}
.ct5-form .ct5-head{align-items:flex-start}.ct5-form .ct5-ico{width:40px;height:40px;margin-top:2px}
.i-mail{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c45f' stroke-width='1.6' stroke-linejoin='round'><rect x='2.5' y='5' width='19' height='14' rx='2'/><path d='M3 6.5l9 6.5 9-6.5'/></svg>")}
.i-phone{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c45f' stroke-width='1.6' stroke-linejoin='round'><path d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/></svg>")}
.i-chat{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c45f' stroke-width='1.6' stroke-linejoin='round'><path d='M20 12a7 7 0 0 1-10.3 6.2L4 20l1.6-4.6A7 7 0 1 1 20 12z'/><path d='M9 12h.01M12.5 12h.01M16 12h.01' stroke-width='2.4' stroke-linecap='round'/></svg>")}
.i-shield{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c45f' stroke-width='1.6' stroke-linejoin='round'><path d='M12 2.5l8 3.2v5.6c0 5.2-3.4 9-8 10.7-4.6-1.7-8-5.5-8-10.7V5.7z'/><path d='M8.5 12l2.5 2.5 4.5-5'/></svg>")}

/* chat en direct */
.ct5-live{position:relative;overflow:hidden}
.ct5-live:after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(242,196,95,.16),transparent 70%);pointer-events:none}
.ct5-live.is-on{border-color:rgba(61,220,132,.55);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(61,220,132,.15),0 0 30px rgba(61,220,132,.12)}
.ct5-live-top{display:flex;align-items:center;gap:16px}
.ct5-live-ava{position:relative;flex:none;width:64px;height:64px;border:2px solid var(--g1);border-radius:50%;background:#1d0b30 url(/img/horoscope/chat-avatar.webp) center/cover no-repeat;box-shadow:0 0 0 5px rgba(227,176,75,.1),0 0 20px rgba(242,196,95,.3)}
.ct5-live-ava:after{content:"";position:absolute;right:1px;bottom:1px;width:16px;height:16px;border:3px solid #1f0c33;border-radius:50%;background:var(--off)}
.ct5-live.is-on .ct5-live-ava:after{background:var(--on);box-shadow:0 0 10px var(--on)}
.ct5-live-st{display:flex;align-items:center;gap:9px;margin:5px 0 0;font-weight:600;font-size:15.5px;color:#cbd5e1}
.ct5-live.is-on .ct5-live-st{color:#5ee08f}
.ct5-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--off)}
.ct5-live.is-on .ct5-dot{background:var(--on);box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ct5pulse 2s infinite}
@keyframes ct5pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.ct5-live-txt{margin:16px 0 0;font-size:15.5px;line-height:1.6;color:var(--tx)}
.ct5-live-act{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:18px}
.ct5-live-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid rgba(246,207,116,.8);border-radius:999px;background:linear-gradient(180deg,#f6d68c,#d89638);color:#1c0b33;font:700 14px Montserrat,Roboto,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 22px rgba(216,150,56,.3);transition:transform .15s,box-shadow .15s}
.ct5-live-btn:before{content:"";width:18px;height:18px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c0b33' stroke-width='2' stroke-linejoin='round'><path d='M20 12a7 7 0 0 1-10.3 6.2L4 20l1.6-4.6A7 7 0 1 1 20 12z'/></svg>") center/contain no-repeat}
.ct5-live-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(216,150,56,.45)}
.ct5-live-btn:focus-visible{outline:2px solid var(--g3);outline-offset:3px}
.ct5-live-where{flex:1 1 220px;margin:0;font-size:13.5px;line-height:1.5;color:var(--mu)}
/* pastille sur la bulle du chat (page contact) */
body#contact #sp-chat-bubble{position:fixed}
body#contact #sp-chat-bubble:after{content:"";position:absolute;right:0;bottom:2px;width:15px;height:15px;border:3px solid #1f0c33;border-radius:50%;background:var(--off)}
body#contact.ct5-chat-on #sp-chat-bubble:after{background:var(--on);box-shadow:0 0 10px var(--on)}

/* formulaire */
body#contact .ct5-form section.contact-form,body#contact .ct5-form .contact-form.shadow-box{padding:0!important;margin:0!important;border:0!important;outline:0!important;background:none!important;box-shadow:none!important}
.ct5-form .contact-form .form-group.row{display:block;margin:0 0 18px!important}
.ct5-form .contact-form .row>[class*=col-]{width:100%!important;max-width:100%!important;flex:none!important;padding:0!important}
.ct5-form .contact-form .form-group.row>.col-md-3:empty,.ct5-form .contact-form .form-footer>.col-md-3:empty{display:none}
.ct5-form .contact-form .form-group.row:last-child:not(:has(input,select,textarea)){display:none}
.ct5-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ct5-form .contact-form label.form-control-label{display:block;margin:0 0 8px!important;padding:0!important;text-align:left!important;font:600 14px/1.3 Montserrat,Roboto,Arial,sans-serif;letter-spacing:.03em;color:#f3e3c4}
.ct5-form .contact-form label small{font-weight:400;color:#a993bf;letter-spacing:0}
.ct5-req{color:var(--g2)}
.ct5-form .contact-form .form-control,.ct5-form .contact-form .bootstrap-filestyle input.form-control{width:100%;min-height:50px;padding:12px 15px!important;border:1px solid rgba(227,176,75,.35)!important;border-radius:12px!important;background:rgba(8,3,16,.75)!important;color:#fff!important;font-size:16px!important;box-shadow:none!important;background-image:none}
.ct5-form .contact-form select.form-control{appearance:none;-webkit-appearance:none;padding-right:44px!important;background:rgba(8,3,16,.75) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3b04b' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") right 16px center/18px no-repeat!important}
.ct5-form .contact-form select.form-control option{background:#1c0b33;color:#fff}
.ct5-form .contact-form textarea.form-control{min-height:160px;resize:vertical;line-height:1.55}
.ct5-form .contact-form .form-control::placeholder{color:#8f7aa6}
.ct5-form .contact-form .form-control:focus{border-color:var(--g2)!important;box-shadow:0 0 0 3px rgba(242,196,95,.18)!important;outline:0}
.ct5-form .contact-form .input-group-prepend,.ct5-form .contact-form .input-group-text{display:none!important}
.ct5-form .ct5-file .bootstrap-filestyle{display:flex;gap:10px;align-items:stretch}
.ct5-form .ct5-file .bootstrap-filestyle input.form-control{flex:1;border-style:dashed!important}
.ct5-form .ct5-file .bootstrap-filestyle .group-span-filestyle,.ct5-form .ct5-file .bootstrap-filestyle .input-group-btn{display:flex}
.ct5-form .ct5-file .bootstrap-filestyle label.btn{display:flex;align-items:center;gap:8px;margin:0!important;padding:0 18px!important;border:1px solid rgba(227,176,75,.6)!important;border-radius:12px!important;background:rgba(227,176,75,.08)!important;color:var(--g2)!important;font:600 13px Montserrat,Roboto,Arial,sans-serif!important;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.ct5-form .ct5-file .bootstrap-filestyle label.btn:hover{background:rgba(227,176,75,.18)!important}
.ct5-hint{margin:8px 0 0;font-size:13px;color:#a993bf}
.ct5-form .contact-form .form-footer{display:block;margin:6px 0 0!important;text-align:center}
.ct5-form .contact-form .form-footer input[type=submit]{width:100%;min-height:56px;border:0!important;border-radius:12px!important;background:linear-gradient(90deg,#b8741f,#e3a63e 50%,#f2c45f)!important;color:#1c0b33!important;font:700 17px Montserrat,Roboto,Arial,sans-serif!important;letter-spacing:.04em;box-shadow:0 10px 26px rgba(216,150,56,.35);cursor:pointer;transition:transform .15s,box-shadow .15s}
.ct5-form .contact-form .form-footer input[type=submit]:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(216,150,56,.5)}
.ct5-priv{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:#a993bf}
.ct5-priv:before{content:"";width:15px;height:15px;flex:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a993bf' stroke-width='2' stroke-linecap='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center/contain no-repeat}
.ct5-form .contact-form .alert,.ct5-form .contact-form .notification{border-radius:12px;margin-bottom:18px}

/* coordonnées */
.ct5-list{list-style:none;margin:0;padding:0}
.ct5-list li{position:relative;margin:0 0 16px;padding-left:40px;font-size:14.5px;line-height:1.45}
.ct5-list li:last-child{margin-bottom:0}
.ct5-list li:before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;background:center/contain no-repeat}
.ct5-list b{display:block;font-weight:600;font-size:15.5px;color:#fff7ea}
.ct5-list span{color:var(--mu)}
.ct5-list a{display:block;margin-top:2px;font-weight:600;color:var(--g2)!important;word-break:break-all}
.ct5-list .i-at:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3b04b' stroke-width='1.7' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>")}
.ct5-list .i-user:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3b04b' stroke-width='1.7'><circle cx='12' cy='8' r='4'/><path d='M4 21c.8-4.5 4-7 8-7s7.2 2.5 8 7'/></svg>")}
.ct5-list .i-globe:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3b04b' stroke-width='1.7'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.5 2.6 3.7 5.6 3.7 9s-1.2 6.4-3.7 9c-2.5-2.6-3.7-5.6-3.7-9S9.5 5.6 12 3z'/></svg>")}

/* FAQ */
.ct5-fq{list-style:none;margin:0;padding:0}
.ct5-fq li{border-bottom:1px solid rgba(227,176,75,.18)}
.ct5-fq a{display:flex;align-items:center;gap:12px;min-height:46px;padding:9px 0;color:var(--tx)!important;font-size:14.5px;line-height:1.4;text-decoration:none!important;transition:color .15s}
.ct5-fq a:after{content:"\203A";flex:none;margin-left:auto;font-size:22px;line-height:1;color:var(--g1)}
.ct5-fq a:hover{color:var(--g3)!important}
.ct5-fall{display:inline-block;margin-top:14px;font-weight:600;font-size:14px;color:var(--g2)!important;text-decoration:none!important}
.ct5-fall:after{content:" \2192"}
.ct5-fall:hover{text-decoration:underline!important}

/* engagements */
.ct5-eg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.ct5-eg li{padding:4px 12px;text-align:center;border-left:1px solid rgba(227,176,75,.2)}
.ct5-eg li:first-child{border-left:0}
.ct5-eg li:before{content:"";display:block;width:38px;height:38px;margin:0 auto 12px;background:center/contain no-repeat}
.ct5-eg b{display:block;font-size:15px;line-height:1.3;color:#fff7ea}
.ct5-eg span{display:block;margin-top:5px;font-size:13.5px;line-height:1.45;color:var(--mu)}
.ct5-eg .e-user:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c45f' stroke-width='1.5'><circle cx='12' cy='8' r='4'/><path d='M4 21c.8-4.5 4-7 8-7s7.2 2.5 8 7'/></svg>")}
.ct5-eg .e-lock:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c45f' stroke-width='1.5' stroke-linecap='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4M12 15v2'/></svg>")}
.ct5-eg .e-clock:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c45f' stroke-width='1.5' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>")}
.ct5-eg .e-heart:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c45f' stroke-width='1.5' stroke-linejoin='round'><path d='M12 20s-7.5-4.6-9-9.5C2 6.9 4.3 4 7.4 4c2 0 3.6 1.1 4.6 2.8C13 5.1 14.6 4 16.6 4 19.7 4 22 6.9 21 10.5 19.5 15.4 12 20 12 20z'/></svg>")}

/* formulaire qui suit le défilement (ordinateur) : --ct5-top calculé par le JS pour garder le bouton d'envoi visible */
@media (min-width:992px){
  .ct5-form{position:sticky;top:var(--ct5-top,170px)}
}
@media (max-width:1199px){
  .ct5-info{grid-template-columns:1fr}
  .ct5-eg{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0}
  .ct5-eg li:nth-child(3){border-left:0}
}
@media (max-width:991px){
  .ct5-hero{margin-top:0;padding:56px 16px 120px}
  .ct5-grid{grid-template-columns:1fr;grid-template-areas:"live" "form" "info" "eng";grid-template-rows:none;gap:20px;margin-top:-90px}
  .ct5-info{grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width:767px){
  .ct5-info{grid-template-columns:1fr}
}
@media (max-width:575px){
  .ct5-hero{padding:40px 16px 100px}
  .ct5-intro{font-size:16px}
  .ct5-grid{margin-top:-74px;gap:16px}
  .ct5-card{padding:22px 18px;border-radius:18px}
  .ct5-ft{font-size:23px}
  .ct5-h{font-size:20px}
  .ct5-duo{grid-template-columns:1fr}
  .ct5-live-btn{width:100%;justify-content:center}
  .ct5-form .ct5-file .bootstrap-filestyle{flex-direction:column}
  .ct5-form .ct5-file .bootstrap-filestyle label.btn{justify-content:center;min-height:48px}
  .ct5-eg li{padding:4px 8px}
}
@media (prefers-reduced-motion:reduce){.ct5-live.is-on .ct5-dot{animation:none}}

/* v6 (18/10/2026) : maquette « Contactez Sortispells sous les étoiles » : bandeau plein écran puis 3 colonnes sur grand écran
   (formulaire | coordonnées + chat en direct à la place des « horaires » | questions fréquentes + engagements) */
@media (min-width:1200px){
  .ct5-hero{padding:70px 16px 150px}
  .ct5-grid{max-width:1420px;grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr) minmax(0,1fr);grid-template-areas:"form coord faq" "form live eng";grid-template-rows:auto 1fr;gap:22px;margin-top:-118px}
  .ct5-info{display:contents}
  .ct5-coord{grid-area:coord;align-self:stretch}
  .ct5-faq{grid-area:faq;align-self:stretch}
  .ct5-live{grid-area:live;align-self:stretch}
  .ct5-eng{grid-area:eng;align-self:stretch}
  .ct5-card{padding:24px 24px 22px}
  .ct5-eg{grid-template-columns:1fr 1fr;row-gap:18px}
  .ct5-eg li:nth-child(3){border-left:0}
  .ct5-eg li:before{width:34px;height:34px;margin-bottom:8px}
  .ct5-eg b{font-size:14.5px}
  .ct5-eg span{font-size:13px}
  .ct5-live-act{flex-direction:column;align-items:stretch}
  .ct5-live-btn{justify-content:center}
  .ct5-live-where{flex:none}
  .ct5-fq a{font-size:14px;min-height:42px}
}

/* occupé avec un autre client (18/10/2026) : orange ; la pastille de la bulle est maintenant gérée par le widget lui-même */
.ct5-live.is-busy{border-color:rgba(245,158,11,.6);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(245,158,11,.18),0 0 30px rgba(245,158,11,.12)}
.ct5-live.is-busy .ct5-live-ava:after{background:#f59e0b;box-shadow:0 0 10px #f59e0b}
.ct5-live.is-busy .ct5-live-st{color:#fcd34d}
.ct5-live.is-busy .ct5-dot{background:#f59e0b;box-shadow:none;animation:none}
body#contact #sp-chat-bubble:after{display:none!important}