/* Orovas · clients.html : styles propres à la page (chargés après site.css) */
/* ---------- Socle commun des pages internes (préfixe pa-) ---------- */
.pa-cream{background:var(--bg-white)}
.pa-sand{background:var(--bg-alt)}
.pa-mist{background:var(--mist)}
.pa-pet{background:var(--pet);border-top:0}
.pa-pet h2,.pa-pet .h-xl,.pa-pet .h-l{color:var(--pet-fg)}
.pa-pet .mute,.pa-pet .lead,.pa-pet .label{color:var(--pet-mute)}
.pa-pet .eyebrow i{background:#FFB020}
.pa-pet .why2{margin-top:44px}
.pa-pet .why-phone .phone{box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.pa-ov{overflow:hidden}
.pa-c{text-align:center}
.pa-mt{margin-top:52px}
/* apparition « qui rebondit » déclenchée par [data-pa].on */
@keyframes paPop{to{opacity:1;transform:none}}
@keyframes paFade{to{opacity:1}}
.pa-a [data-pa] .pa-pop{opacity:0;transform:translateY(22px) scale(.93)}
.pa-a [data-pa].on .pa-pop{animation:paPop .75s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i,0) * .12s + var(--d0,0s))}
.pa-a [data-pa] .pa-up{opacity:0;transform:translateY(16px)}
.pa-a [data-pa].on .pa-up{animation:paPop .8s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i,0) * .12s + var(--d0,0s))}
/* curseur de frappe */
.pa-typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:paCaret .8s steps(1) infinite}
@keyframes paCaret{50%{opacity:0}}
/* formules (2 visibles) */
.pa-plans{display:grid;gap:18px;max-width:880px;margin:44px auto 0}
@media (min-width:700px){.pa-plans{grid-template-columns:1fr 1fr}}
.pa-plans .p4{position:relative}
.pa-plans .p4-h{min-height:0}
.pa-plans .p4 .tagline{min-height:0}
.pa-reco{box-shadow:0 0 0 2px #FF6B2C,0 34px 70px -34px rgba(255,107,44,.5)}
.pa-plans .badge{position:absolute;top:-13px;right:20px}
.pa-also{margin-top:22px;text-align:center;font-size:15px;color:var(--t2)}
.pa-also .link{display:inline-flex}
.pa-plans + .setup-line{margin-top:26px}
.pa-faq{margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){.pa-typing::after{animation:none}}
/* ---------- clients.html (préfixe cl-) ---------- */
/* Héros : les messages arrivent un par un */
@keyframes clRow{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.pa-a .page-hero .inbox .ib{animation:clRow .7s cubic-bezier(.22,1,.36,1) backwards}
.pa-a .page-hero .inbox .ib:nth-child(1){animation-delay:1.3s}.pa-a .page-hero .inbox .ib:nth-child(2){animation-delay:1.55s}.pa-a .page-hero .inbox .ib:nth-child(3){animation-delay:1.8s}.pa-a .page-hero .inbox .ib:nth-child(4){animation-delay:2.05s}.pa-a .page-hero .inbox .ib:nth-child(5){animation-delay:2.3s}
/* Flux : canaux -> Sam -> réponse */
.cl-flow{display:grid;gap:22px;margin-top:52px;align-items:center}
@media (min-width:980px){.cl-flow{grid-template-columns:1.05fr 180px .95fr;gap:0}}
.cl-in{display:grid;gap:12px}
.cl-msg{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 30px -22px rgba(60,30,10,.4)}
.cl-msg:nth-child(2){margin-left:22px}.cl-msg:nth-child(3){margin-left:10px}.cl-msg:nth-child(4){margin-left:30px}
@media (max-width:600px){.cl-msg:nth-child(n){margin-left:0}}
.cl-lg{display:flex;flex:none}
.cl-lg img{width:34px;height:34px;padding:7px;border-radius:11px;background:var(--bg-white);border:1px solid var(--line)}
.cl-lg img + img{margin-left:-10px}
.cl-msg b{display:block;font-size:16px}
.cl-msg small{display:block;font-size:14px;color:var(--t2);margin-top:2px}
.cl-hub{display:flex;align-items:center;justify-content:center;gap:8px}
.cl-sam{width:64px;height:64px;font-size:26px;font-weight:700;color:#1A0A04;display:grid;place-items:center;border-radius:50%;flex:none;animation:clHalo 2.4s ease-out infinite}
@keyframes clHalo{0%{box-shadow:0 0 0 0 rgba(255,107,44,.45)}100%{box-shadow:0 0 0 26px rgba(255,107,44,0)}}
.cl-line{display:flex;gap:6px}
.cl-line i{width:8px;height:8px;border-radius:50%;background:#C8613B;opacity:.25;animation:clDot 1.5s ease-in-out infinite}
.cl-line i:nth-child(2){animation-delay:.2s}.cl-line i:nth-child(3){animation-delay:.4s}
.cl-line + .cl-sam + .cl-line i{background:#17414A}
@keyframes clDot{0%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1.15)}}
@media (max-width:979px){.cl-hub{flex-direction:column}.cl-line{flex-direction:column}}
.cl-out{position:relative;padding:34px 28px 30px;border-radius:28px;background:#17414A;color:#F3EDE4;text-align:center;box-shadow:0 40px 80px -40px rgba(15,49,56,.7)}
.cl-ring{width:170px;height:170px;display:block;margin:0 auto;transform:rotate(-90deg)}
.cl-ring circle{fill:none;stroke-width:8}
.cl-ring .bg{stroke:rgba(255,255,255,.12)}
.cl-ring .fg{stroke:#FFB020;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:0}
.pa-a .cl-flow .cl-ring .fg{stroke-dashoffset:327}
.pa-a .cl-flow.on .cl-ring .fg{transition:stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1) 1s;stroke-dashoffset:40}
.cl-big{position:absolute;left:0;right:0;top:34px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cl-big small{font-size:13px;color:#B9CCCB}
.cl-big b{font-family:var(--f-d);font-size:31px;letter-spacing:-.04em;line-height:1.05;color:#F3EDE4}
.cl-out p{margin-top:18px;font-size:15px;color:#B9CCCB;max-width:34ch;margin-left:auto;margin-right:auto}
/* Trois modes */
.cl-modes{display:grid;gap:16px;margin-top:48px}
@media (min-width:900px){.cl-modes{grid-template-columns:repeat(3,1fr)}}
.cl-mode{display:flex;flex-direction:column;padding:26px 24px 22px;border-radius:26px;background:var(--card);border:1px solid var(--mist-line)}
.cl-n{font-family:var(--f-m);font-size:12.5px;color:var(--pet-txt)}
.cl-mode h3{margin-top:10px;font-size:24px;letter-spacing:-.035em}
.cl-mode > p{margin-top:6px;color:var(--t2);font-size:15px}
.cl-mini{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:7px}
.cl-mini .bub{font-size:13.5px;max-width:92%}
.cl-mode.dk{background:#17414A;border-color:#17414A}
.cl-mode.dk h3{color:#F3EDE4}.cl-mode.dk > p{color:#B9CCCB}.cl-mode.dk .cl-n{color:#FFB020}
.cl-notif{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--bg-white);border:1px solid var(--line)}
.cl-notif svg{color:#C8613B;flex:none}
.cl-notif b{display:block;font-size:14px}.cl-notif small{font-size:12.5px;color:var(--t2)}
.pa-a .cl-modes .cl-late{opacity:0;transform:translateY(8px)}
.pa-a .cl-modes.on .cl-late{animation:paPop .6s cubic-bezier(.34,1.56,.64,1) 1.4s forwards}
.pa-a .cl-modes.on .cl-notif svg{animation:clRing 1.2s ease 1.6s 2}
@keyframes clRing{0%,100%{transform:rotate(0)}20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.cl-set{max-width:640px;margin:28px auto 0}
/* Avis */
.cl-rev{position:relative;max-width:460px;width:100%;justify-self:center;padding:22px;border-radius:26px;background:var(--card);border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(60,30,10,.5)}
.cl-rev-h{display:flex;align-items:center;gap:10px;font-size:15px}
.cl-rev-h img{width:22px;height:22px}
.cl-rev-h .demo-tag{margin-left:auto}
.cl-rev-c{display:flex;gap:14px;margin-top:18px}
.cl-rev-c .ini{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#17414A;color:#F3EDE4;font-weight:700}
.cl-rev-c b{font-size:16px}
.cl-stars{display:flex;gap:3px;margin-top:2px}
.cl-stars i{font-style:normal;color:#E8A317;font-size:22px;line-height:1}
.cl-rev-c p{margin-top:6px;font-size:16px;color:var(--t1)}
.cl-reply{margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--bg-alt);border-left:3px solid #C8613B}
.cl-reply small{font-size:12.5px;color:var(--t3)}
.cl-reply p{margin-top:6px;font-size:15px;line-height:1.5;min-height:4.5em;color:var(--t1)}
.cl-pub{position:absolute;right:20px;bottom:-14px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:#17414A;color:#F3EDE4;font-weight:600;font-size:13.5px;box-shadow:0 10px 24px -10px rgba(15,49,56,.6)}
.cl-pub svg{color:#FFB020}
.pa-a .cl-rev .cl-pub{opacity:0;transform:scale(.6)}
.pa-a .cl-rev.typed .cl-pub{animation:paPop .6s cubic-bezier(.34,1.56,.64,1) .2s forwards}
/* Bilan 21 h */
.cl-21{display:flex;align-items:center;gap:14px;margin:18px 0 10px;color:#C8613B}
.cl-21 .big-n{font-size:clamp(72px,9vw,120px)}
.cl-recap{max-width:440px;width:100%;justify-self:center;padding:20px;border-radius:26px;background:var(--card);border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(60,30,10,.5)}
.cl-recap-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cl-recap-h .ava{width:36px;height:36px}
.cl-recap-h b{display:block;font-size:15px}.cl-recap-h small{font-size:12.5px;color:var(--t3)}
.cl-recap-h .demo-tag{margin-left:auto}
.cl-recap ul{list-style:none;margin:0;padding:0}
.cl-recap li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.cl-recap li:last-child{border-bottom:0;padding-bottom:2px}
.cl-recap li b{display:block;font-size:15.5px}.cl-recap li small{font-size:13.5px;color:var(--t2)}
.cl-ck{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px}
.cl-ck.ok{background:#17414A;color:#FFB020}
.cl-ck.va{background:#FFB020;color:#2A1308}
.cl-ck.me{background:rgba(200,97,59,.14);color:#93452A}
@media (prefers-reduced-motion:reduce){.cl-sam,.cl-line i{animation:none!important}.cl-line i{opacity:.6}}
@media (max-width:699px){.pa-plans .pa-reco{order:-1}}