/* ═══════════ Page contact : motion design ═══════════
   État par défaut = état final (sans JS, reduced-motion). Les boucles ne
   jouent que si l'élément est visible (classe is-live posée par
   contact-page.js). Uniquement transform, opacity et stroke. */

/* ── Héros ── */
.ct-hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.ct-title{font-size:clamp(40px,5.6vw,84px);line-height:1.04}
.ct-title__hl .hw__i{color:var(--yellow)}
.ct-hero__rate{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,3vh,26px);padding:10px 16px;border-radius:999px;border:1px solid rgba(250,181,18,0.35);background:rgba(250,181,18,0.05);color:var(--text);text-decoration:none;font-size:14px;transition:border-color var(--transition),transform var(--transition)}
.ct-hero__rate:hover{border-color:var(--yellow);transform:translateY(-2px)}
.ct-hero__rate strong{font-family:var(--font-display);font-size:17px}
.ct-hero__rate>span:last-child{color:var(--muted-2)}

/* Conversation animée */
.ct-chat{background:#121212;border:1px solid rgba(255,255,255,0.1);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,0.45)}
.ct-chat__bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,0.07);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,0.6)}
.ct-chat__live{width:8px;height:8px;border-radius:50%;background:#4ade80}
.ct-chat__body{display:flex;flex-direction:column;gap:14px;padding:20px 18px 22px;min-height:300px}
.ct-msg{position:relative;max-width:86%}
.ct-msg p{margin:0;padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.5}
.ct-msg--you{align-self:flex-end}
.ct-msg--you p{background:var(--yellow);color:#111;border-bottom-right-radius:5px;transform-origin:100% 100%}
.ct-msg__status{display:block;text-align:right;margin-top:5px;font-size:11px;color:rgba(255,255,255,0.45);height:14px;position:relative}
.ct-sent,.ct-read{position:absolute;right:0}
.ct-read{color:var(--yellow);opacity:1}
.ct-sent{opacity:0}
.ct-typing{display:none}
.ct-msg--me{display:flex;align-items:flex-end;gap:10px;align-self:flex-start}
.ct-msg--me img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(250,181,18,0.6);flex:none}
.ct-msg--me p{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);color:var(--text);border-bottom-left-radius:5px}
.ct-chip{align-self:flex-start;margin-left:44px;padding:7px 13px;border-radius:999px;border:1px dashed rgba(250,181,18,0.5);color:var(--yellow);font-size:12.5px;font-weight:500}

/* ── Colonne contact : icônes vivantes ── */
.contact-option{transition:transform var(--transition),border-color var(--transition)}
.contact-option:hover{transform:translateX(6px)}
.contact-option__icon svg{transition:transform 0.4s var(--ease)}

/* ── Carte note Google ── */
.ct-trust{margin-top:22px;padding:22px;border:1px solid rgba(250,181,18,0.3);border-radius:16px;background:linear-gradient(160deg,rgba(250,181,18,0.07),rgba(255,255,255,0.01) 60%)}
.ct-trust__score{display:flex;align-items:center;gap:16px}
.ct-trust__big{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:0.9;color:var(--text);letter-spacing:-0.03em}
.ct-trust__stars{display:flex;gap:2px;color:var(--yellow);font-size:20px;line-height:1}
.ct-trust__stars i{font-style:normal;display:inline-block}
.ct-trust__link{display:inline-block;margin-top:6px;font-size:13.5px;color:var(--muted-2);text-decoration:none}
.ct-trust__link:hover{color:var(--yellow)}
.ct-trust__bar{height:3px;margin:16px 0 14px;border-radius:2px;background:rgba(255,255,255,0.08);overflow:hidden}
.ct-trust__bar span{display:block;height:100%;background:var(--yellow);transform-origin:0 50%}
.ct-quotes{position:relative}
.ct-quote{margin:0 0 12px;padding:0}
.ct-quote p{margin:0 0 6px;font-size:14.5px;line-height:1.6;color:var(--text);font-style:italic}
.ct-quote footer{font-size:12.5px;color:var(--muted-2)}
.ct-trust__who{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.07)}
.ct-trust__who img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(250,181,18,0.5)}
.ct-trust__who strong{display:block;font-size:14.5px;color:var(--text)}
.ct-trust__who span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:2px}
/* Carrousel activé par JS : les avis se superposent et se relaient */
.ct-quotes.is-carousel{display:grid}
.ct-quotes.is-carousel .ct-quote{grid-area:1/1;margin:0;opacity:0;transform:translateY(10px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);pointer-events:none}
.ct-quotes.is-carousel .ct-quote.is-on{opacity:1;transform:none;pointer-events:auto}

/* ── Formulaire : progression et focus ── */
.ct-progress{display:flex;align-items:center;gap:12px;margin:4px 0 22px}
.ct-progress__track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,0.08);overflow:hidden}
.ct-progress__track span{display:block;height:100%;background:var(--yellow);transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform 0.5s var(--ease)}
.ct-progress__label{font-size:12.5px;color:var(--muted-2);white-space:nowrap}
.ct-progress__label b{color:var(--yellow);font-weight:700}
.ct-progress.is-done .ct-progress__label{color:var(--yellow)}
.contact-form .field__input,.contact-form .field__textarea{background-image:linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size 0.45s var(--ease),border-color var(--transition)}
.contact-form .field__input:focus,.contact-form .field__textarea:focus{background-size:100% 2px}
.contact-form__submit{position:relative;overflow:hidden}
.contact-form__submit svg{transition:transform 0.3s var(--ease)}
.contact-form__submit:hover svg{transform:translateX(5px)}

/* ── Étapes ── */
.ct-steps{list-style:none;margin:clamp(28px,5vh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);position:relative}
.ct-steps::before{content:"";position:absolute;top:22px;left:22px;right:22px;height:2px;background:rgba(255,255,255,0.08)}
.ct-steps::after{content:"";position:absolute;top:22px;left:22px;right:22px;height:2px;background:var(--yellow);transform-origin:0 50%}
.ct-step{position:relative}
.ct-step__n{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--bg);border:2px solid var(--yellow);color:var(--yellow);font-family:var(--font-display);font-weight:700;font-size:18px}
.ct-step h3{font-size:clamp(18px,1.8vw,22px);margin:18px 0 8px}
.ct-step p{margin:0;color:var(--muted-2);font-size:15px;line-height:1.6}

/* ── Animations ── */
@media (prefers-reduced-motion:no-preference){
  .ct-in{opacity:0;transform:translateY(16px);animation:ctIn 0.7s var(--ease) var(--d,0s) forwards}
  .ct-hero__rate .g-rate__stars i{animation:gStar 0.5s cubic-bezier(0.34,1.6,0.5,1) backwards}
  .ct-hero__rate .g-rate__stars i:nth-child(1){animation-delay:0.95s}
  .ct-hero__rate .g-rate__stars i:nth-child(2){animation-delay:1.05s}
  .ct-hero__rate .g-rate__stars i:nth-child(3){animation-delay:1.15s}
  .ct-hero__rate .g-rate__stars i:nth-child(4){animation-delay:1.25s}
  .ct-hero__rate .g-rate__stars i:nth-child(5){animation-delay:1.35s}
  /* Conversation : boucle de 11 s, seulement quand visible */
  .ct-chat.is-live .ct-chat__live{animation:ctBlink 1.6s ease-in-out infinite}
  .ct-chat.is-live .ct-msg--you{animation:ctYou 11s var(--ease) infinite}
  .ct-chat.is-live .ct-msg--you p{animation:ctBubble 11s var(--ease) infinite}
  .ct-chat.is-live .ct-typing{display:flex;gap:4px;position:absolute;right:0;top:0;padding:13px 15px;border-radius:16px;border-bottom-right-radius:5px;background:var(--yellow);animation:ctTyping 11s linear infinite}
  .ct-chat.is-live .ct-typing i{width:6px;height:6px;border-radius:50%;background:#111;animation:ctDot 0.9s ease-in-out infinite}
  .ct-chat.is-live .ct-typing i:nth-child(2){animation-delay:0.15s}
  .ct-chat.is-live .ct-typing i:nth-child(3){animation-delay:0.3s}
  .ct-chat.is-live .ct-sent{animation:ctSent 11s linear infinite}
  .ct-chat.is-live .ct-read{animation:ctRead 11s linear infinite}
  .ct-chat.is-live .ct-msg--me{animation:ctMe 11s var(--ease) infinite}
  .ct-chat.is-live .ct-chip{animation:ctChip 11s var(--ease) infinite}
  /* Colonne contact */
  .contact-option:nth-of-type(1):hover .contact-option__icon svg{animation:ctRing 0.6s ease-in-out}
  .contact-option:nth-of-type(2):hover .contact-option__icon svg,.contact-option:nth-of-type(4):hover .contact-option__icon svg{transform:scale(1.18) rotate(-6deg)}
  .contact-option:nth-of-type(3):hover .contact-option__icon svg{transform:translateY(-3px)}
  /* Carte note Google */
  .ct-trust.is-visible .ct-trust__stars i{animation:gStar 0.55s cubic-bezier(0.34,1.6,0.5,1) backwards}
  .ct-trust.is-visible .ct-trust__stars i:nth-child(1){animation-delay:0.3s}
  .ct-trust.is-visible .ct-trust__stars i:nth-child(2){animation-delay:0.42s}
  .ct-trust.is-visible .ct-trust__stars i:nth-child(3){animation-delay:0.54s}
  .ct-trust.is-visible .ct-trust__stars i:nth-child(4){animation-delay:0.66s}
  .ct-trust.is-visible .ct-trust__stars i:nth-child(5){animation-delay:0.78s}
  .ct-trust.is-visible .ct-trust__bar span{animation:ctBar 1.2s var(--ease) 0.3s both}
  .ct-trust.is-visible .ct-trust__big{animation:ctPop 0.7s cubic-bezier(0.34,1.4,0.5,1) 0.15s both}
  /* Étapes */
  .ct-steps::after{transform:scaleX(0);transition:transform 1.6s var(--ease) 0.2s}
  .ct-steps.is-visible::after{transform:none}
  .ct-steps .ct-step__n{transform:scale(0.4);opacity:0;transition:transform 0.6s cubic-bezier(0.34,1.6,0.5,1),opacity 0.4s}
  .ct-steps.is-visible .ct-step:nth-child(1) .ct-step__n{transform:none;opacity:1;transition-delay:0.2s}
  .ct-steps.is-visible .ct-step:nth-child(2) .ct-step__n{transform:none;opacity:1;transition-delay:0.9s}
  .ct-steps.is-visible .ct-step:nth-child(3) .ct-step__n{transform:none;opacity:1;transition-delay:1.6s}
}
@keyframes ctIn{to{opacity:1;transform:none}}
@keyframes ctBlink{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes ctYou{0%,3%{opacity:0;transform:translateY(14px) scale(0.96)}8%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes ctBubble{0%,25%{opacity:0;transform:scale(0.92)}31%,100%{opacity:1;transform:none}}
@keyframes ctTyping{0%,6%{opacity:0}8%,24%{opacity:1}28%,100%{opacity:0}}
@keyframes ctDot{0%,100%{transform:none;opacity:0.4}50%{transform:translateY(-3px);opacity:1}}
@keyframes ctSent{0%,30%{opacity:0}33%,42%{opacity:1}45%,100%{opacity:0}}
@keyframes ctRead{0%,44%{opacity:0}48%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes ctMe{0%,52%{opacity:0;transform:translateY(14px) scale(0.96)}58%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes ctChip{0%,66%{opacity:0;transform:scale(0.85)}72%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ctRing{0%,100%{transform:none}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes ctBar{from{transform:scaleX(0)}to{transform:none}}
@keyframes ctPop{from{transform:scale(0.6);opacity:0}to{transform:none;opacity:1}}

/* ── Responsive ── */
@media (max-width:980px){
  .ct-hero__grid{grid-template-columns:1fr}
  .ct-chat{max-width:520px}
}
@media (max-width:768px){
  .ct-chat__body{min-height:0}
  .ct-steps{grid-template-columns:1fr;gap:26px}
  .ct-steps::before,.ct-steps::after{top:22px;bottom:22px;left:22px;right:auto;width:2px;height:auto}
  .ct-steps::after{transform-origin:50% 0}
  .ct-step{padding-left:64px}
  .ct-step__n{position:absolute;left:0;top:0}
  .ct-step h3{margin-top:10px}
}
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  .ct-steps::after{transform:scaleY(0)}
  .ct-steps.is-visible::after{transform:none}
}

/* La page contact a sa propre carte de note : pas de pastille flottante sur le formulaire */
.g-rate{display:none}