/* ===================== la conversation de contact =====================
   Partagée par l'accueil et la page Contact. Toutes les classes portent le
   préfixe cv- : l'accueil a déjà une section .studio et des règles
   .contact .puces, .contact .envoyer, qui auraient pris la main.
   Les tailles suivent --k (1 px au-dessus de 1440, moins en dessous) ; la
   hauteur de la fenêtre se règle par --cv-hauteur, propre à chaque page. */

.cv-fenetre{--k-cv:var(--k, 1px);display:flex;flex-direction:column;height:var(--cv-hauteur, 700px);
  background:var(--surface);border-radius:calc(28 * var(--k-cv));overflow:hidden}
.cv-tete{display:flex;align-items:center;gap:calc(12 * var(--k-cv));
  padding:calc(32 * var(--k-cv)) calc(32 * var(--k-cv)) calc(24 * var(--k-cv));border-bottom:1px solid var(--trait)}
.cv-avatar{flex:none;display:grid;place-items:center;width:calc(44 * var(--k-cv));height:calc(44 * var(--k-cv));
  border-radius:50%;background:var(--aplat-bleu);color:#fff;font-family:'Mona Sans',system-ui,sans-serif;
  font-weight:800;font-size:calc(30 * var(--k-cv));line-height:1;padding-bottom:calc(4 * var(--k-cv))}
.cv-qui{font-weight:600;font-size:max(11.9px, calc(14 * var(--k-cv)));line-height:max(14.5px, calc(17 * var(--k-cv)));color:var(--encre)}
.cv-dispo{margin-top:calc(3 * var(--k-cv));font-size:max(11px, calc(12 * var(--k-cv)));line-height:max(12.8px, calc(14 * var(--k-cv)));color:var(--gris)}

.cv-fil{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  gap:calc(16 * var(--k-cv));padding:calc(32 * var(--k-cv)) calc(32 * var(--k-cv)) calc(24 * var(--k-cv));
  scrollbar-width:none}
.cv-fil::-webkit-scrollbar{display:none}
/* chaque bulle éclot depuis son coin d'attache, comme dans une messagerie */
.cv-bulle{max-width:calc(460 * var(--k-cv));padding:calc(14 * var(--k-cv)) calc(20 * var(--k-cv));
  border-radius:calc(18 * var(--k-cv));font-size:max(13.6px, calc(16 * var(--k-cv)));line-height:max(20.4px, calc(24 * var(--k-cv)));
  animation:cv-eclot .55s var(--courbe) both}
.cv-studio{align-self:flex-start;background:var(--fond);color:var(--encre);
  border-bottom-left-radius:calc(6 * var(--k-cv));transform-origin:0 100%}
.cv-vous{align-self:flex-end;background:var(--aplat-bleu);color:#fff;
  border-bottom-right-radius:calc(6 * var(--k-cv));transform-origin:100% 100%}
.cv-studio a{color:inherit}
@keyframes cv-eclot{ from{opacity:0;transform:translateY(10px) scale(.92)} to{opacity:1;transform:none} }
/* on écrit… */
.cv-frappe{align-self:flex-start;display:flex;gap:4px;padding:calc(14 * var(--k-cv)) calc(22 * var(--k-cv));
  background:var(--fond);border-radius:calc(18 * var(--k-cv));border-bottom-left-radius:calc(6 * var(--k-cv));
  animation:cv-eclot .4s var(--courbe) both}
.cv-frappe i{width:8px;height:8px;border-radius:50%;background:var(--gris-clair);animation:cv-saute 1.1s ease-in-out infinite}
.cv-frappe i:nth-child(2){animation-delay:.15s}
.cv-frappe i:nth-child(3){animation-delay:.3s}
@keyframes cv-saute{ 0%,60%,100%{transform:translateY(0);opacity:.55} 30%{transform:translateY(-4px);opacity:1} }

.cv-puces{display:flex;flex-wrap:wrap;gap:calc(8 * var(--k-cv));max-width:calc(620 * var(--k-cv));margin-top:calc(-4 * var(--k-cv))}
.cv-puce{height:calc(38 * var(--k-cv));padding:0 calc(16 * var(--k-cv));border-radius:calc(19 * var(--k-cv));
  border:1px solid var(--trait);background:transparent;color:var(--encre);cursor:pointer;
  font:600 max(11px, calc(13 * var(--k-cv))) 'Bricolage Grotesque',system-ui,sans-serif;
  opacity:0;transform:translateY(8px);animation:cv-eclot .5s var(--courbe) forwards;
  animation-delay:calc(var(--i) * 45ms);
  transition:background .25s ease, border-color .25s ease, color .25s ease, scale .35s var(--courbe)}
@media (hover:hover){ .cv-puce:hover{border-color:var(--encre)} }
.cv-puce:active{scale:.96}
.cv-puce[aria-pressed="true"]{background:var(--aplat-bleu);border-color:var(--bleu);color:#fff}
.cv-puce:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.cv-repondu .cv-puce{cursor:default;pointer-events:none}
.cv-repondu .cv-puce[aria-pressed="false"]{opacity:.45}

/* état C : la carte d'accusé de réception, le rond bleu, la coche qui se trace */
.cv-recu{align-self:flex-start;max-width:calc(460 * var(--k-cv));padding:calc(28 * var(--k-cv)) calc(28 * var(--k-cv)) calc(30 * var(--k-cv));
  border-radius:calc(20 * var(--k-cv));background:var(--fond-sombre);color:#fff;animation:cv-eclot .6s var(--courbe) both}
.cv-recu .cv-rond{display:grid;place-items:center;width:calc(56 * var(--k-cv));height:calc(56 * var(--k-cv));
  border-radius:50%;background:var(--aplat-bleu)}
.cv-recu svg{width:calc(22 * var(--k-cv));height:auto}
.cv-recu path{stroke-dasharray:1;stroke-dashoffset:1;animation:cv-coche .7s var(--courbe) .35s forwards}
@keyframes cv-coche{ to{stroke-dashoffset:0} }
.cv-dit{margin-top:calc(18 * var(--k-cv));font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;
  font-size:calc(28 * var(--k-cv));line-height:calc(33 * var(--k-cv));letter-spacing:-0.035em}
.cv-suite{margin-top:calc(10 * var(--k-cv));font-size:max(12.8px, calc(15 * var(--k-cv)));line-height:max(20.5px, calc(24 * var(--k-cv)));color:var(--mention)}
.cv-recu a{color:#fff}

/* la zone de saisie ; état A : le champ actif s'entoure de bleu */
.cv-saisie{position:relative;display:flex;align-items:center;margin:0 calc(24 * var(--k-cv)) calc(24 * var(--k-cv));
  height:calc(72 * var(--k-cv));min-height:56px;padding:0 calc(6 * var(--k-cv)) 0 calc(32 * var(--k-cv));
  background:var(--fond);border-radius:calc(36 * var(--k-cv));box-shadow:0 0 0 0 rgba(35,75,233,0);transition:box-shadow .35s ease}
.cv-saisie:focus-within{box-shadow:0 0 0 2px var(--bleu)}
.cv-saisie input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;
  font:400 16px 'Bricolage Grotesque',system-ui,sans-serif;color:var(--encre)}
.cv-saisie input::placeholder{color:var(--mention)}
.cv-saisie input:disabled{cursor:default}
.cv-envoyer{flex:none;display:grid;place-items:center;width:calc(60 * var(--k-cv));height:calc(60 * var(--k-cv));
  min-width:46px;min-height:46px;border:0;border-radius:50%;background:var(--aplat-bleu);color:#fff;cursor:pointer;
  transition:background .3s ease, scale .35s var(--courbe), opacity .3s ease}
/* la flèche garde la taille du « › » de la planche : 10 × 16 dans un rond de 60 */
.cv-envoyer svg{width:17%;height:auto;margin-left:2%;transition:translate .35s var(--courbe)}
@media (hover:hover){ .cv-envoyer:hover:not(:disabled){scale:1.06} }
@media (hover:hover){ .cv-envoyer:hover:not(:disabled) svg{translate:2px 0} }
.cv-envoyer:disabled{background:var(--aplat-bleu-pale);cursor:default}
.cv-envoyer:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
/* état B : l'erreur, en bleu, jamais en rouge, et qui dit quoi corriger */
.cv-erreur{display:flex;align-items:flex-start;gap:calc(8 * var(--k-cv));margin:calc(-12 * var(--k-cv)) calc(40 * var(--k-cv)) calc(20 * var(--k-cv));
  font-size:max(11px, calc(13 * var(--k-cv)));line-height:max(13.5px, calc(16 * var(--k-cv)));color:var(--bleu);animation:cv-eclot .4s var(--courbe) both}
.cv-erreur[hidden]{display:none}
.cv-erreur .cv-rond{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--aplat-bleu);color:#fff;font-weight:600;font-size:11px;line-height:1}

/* « Ou directement » : l'adresse, le délai de réponse, les réseaux */
.cv-intitule{font-weight:600;font-size:max(11px, calc(10 * var(--k)));line-height:max(12px, calc(12 * var(--k)));
  letter-spacing:0.1em;text-transform:uppercase;color:var(--mention)}
.cv-adresse{display:inline-block;margin-top:calc(12 * var(--k));position:relative;
  font-weight:600;font-size:max(14.4px, calc(17 * var(--k)));line-height:max(16.9px, calc(20 * var(--k)));color:var(--encre);text-decoration:none}
.cv-adresse::before{content:'';position:absolute;inset:-12px -4px}
.cv-adresse::after,.cv-reseaux a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--courbe)}
@media (hover:hover){ .cv-adresse:hover::after,.cv-reseaux a:hover::after{transform:scaleX(1);transform-origin:left} }
.cv-mention{margin-top:calc(12 * var(--k));font-size:max(11px, calc(13 * var(--k)));line-height:max(13.5px, calc(16 * var(--k)));color:var(--mention)}
.cv-reseaux{margin-top:calc(24 * var(--k));display:flex;gap:calc(24 * var(--k))}
.cv-reseaux a{position:relative;display:inline-flex;align-items:center;gap:calc(6 * var(--k));
  font-weight:600;font-size:max(12.8px, calc(15 * var(--k)));line-height:max(15.4px, calc(18 * var(--k)));color:var(--encre);text-decoration:none}
.cv-reseaux a::after{right:calc(17 * var(--k))}
.cv-reseaux a svg{transition:translate .45s var(--courbe)}
@media (hover:hover){ .cv-reseaux a:hover svg{translate:2px -2px} }

@media (prefers-reduced-motion: reduce){
  .cv-bulle,.cv-frappe,.cv-puce,.cv-recu,.cv-erreur{animation:none;opacity:1;transform:none}
  .cv-frappe i{animation:none}
  .cv-recu path{animation:none;stroke-dashoffset:0}
}
@media (max-width:900px){
  .cv-fenetre{height:min(640px, 78svh);border-radius:22px}
  .cv-tete{padding:20px 20px 16px}
  .cv-fil{padding:20px 16px 16px;gap:12px}
  .cv-bulle{max-width:86%;font-size:15px;line-height:22px;padding:12px 16px}
  .cv-puces{max-width:100%}
  .cv-puce{height:40px;padding:0 15px;font-size:13px}
  .cv-intitule{font-size:11px;line-height:14px}
  .cv-reseaux a{padding:10px 0;margin:-10px 0}
  .cv-saisie{margin:0 12px 12px;height:60px;padding-left:20px}
  .cv-envoyer{width:48px;height:48px}
  .cv-erreur{margin:-4px 24px 14px;font-size:13px;line-height:17px}
}