/* COMM ONE — contact.css · page /contact (formulaire animé) */
body[data-page]{background:var(--lait)}
.ct{position:relative;overflow:hidden;padding:calc(var(--head-h) + clamp(32px,6vw,72px)) 0 clamp(64px,9vw,120px);isolation:isolate}

/* ── Décor : orbes qui dérivent + grain de points ── */
.ct-orbs{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ct-orbs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.ct-orbs i:nth-child(1){width:44vmax;height:44vmax;left:-12vmax;top:-14vmax;background:var(--accent);animation:ct-drift 18s var(--ease-inout) infinite alternate}
.ct-orbs i:nth-child(2){width:30vmax;height:30vmax;right:-8vmax;top:18%;background:var(--accent-teinte);animation:ct-drift 22s var(--ease-inout) -6s infinite alternate-reverse}
.ct-orbs i:nth-child(3){width:22vmax;height:22vmax;left:30%;bottom:-12vmax;background:var(--citron-teinte);animation:ct-drift 26s var(--ease-inout) -3s infinite alternate}
.ct-orbs::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(23,20,42,.09) 1px,transparent 1.4px) 0 0/22px 22px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 70%);mask:linear-gradient(180deg,#000,transparent 70%)}
@keyframes ct-drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
.ct-orbs i{transition:background var(--t-lg) var(--ease-out)}

.ct-grid{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.ct-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.ct-intro{position:sticky;top:calc(var(--head-h) + 32px)}}

/* ── Colonne titre ── */
.ct-tag{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:var(--r-pill);background:var(--blanc);box-shadow:var(--ombre-1);
  font:600 var(--fs-small)/1 var(--f-texte);color:var(--encre);margin-bottom:22px}
.ct-tag i{width:22px;height:22px;border-radius:50%;background:var(--c,var(--accent));position:relative}
.ct-tag i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--c,var(--accent));opacity:0;animation:ct-ping 2.4s var(--ease-out) infinite}
@keyframes ct-ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.ct-tag small{color:var(--encre-2);font-weight:500}
.ct-h1{font:800 clamp(2.3rem,1.5rem + 3.6vw,4.4rem)/1.02 var(--f-titre);letter-spacing:-.02em;color:var(--encre);margin:0 0 18px;
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),filter 180ms}
.ct-h1.is-out{opacity:0;transform:translateY(10px);filter:blur(6px)}
.ct-h1-sur{display:block;font:600 var(--fs-lead)/1.2 var(--f-texte);letter-spacing:0;color:var(--encre-2);margin-bottom:10px}
.ct-line{display:block;height:6px;width:120px;border-radius:6px;background:var(--accent);margin:0 0 22px;transform-origin:left;animation:ct-grow .9s var(--spring-soft) .25s both}
@keyframes ct-grow{from{transform:scaleX(0)}}
.ct-lead{font-size:var(--fs-lead);line-height:1.55;color:var(--encre-2);max-width:32rem;margin:0 0 26px}
.ct-promise{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ct-promise li{display:flex;gap:12px;align-items:center;font-weight:500;color:var(--encre);opacity:0;transform:translateX(-14px);animation:ct-in .6s var(--ease-out) forwards}
.ct-promise li:nth-child(1){animation-delay:.45s}.ct-promise li:nth-child(2){animation-delay:.58s}.ct-promise li:nth-child(3){animation-delay:.71s}
.ct-promise b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-teinte);color:var(--accent-txt);font:700 .85rem/1 var(--f-chiffre)}
@keyframes ct-in{to{opacity:1;transform:none}}

/* ── Carte formulaire ── */
.ct-card{position:relative;background:var(--blanc);border-radius:var(--r-xl);box-shadow:0 30px 80px -30px rgba(23,20,42,.35),var(--ombre-1);
  padding:clamp(22px,4vw,44px);overflow:hidden;animation:ct-card .8s var(--spring-soft) .1s both}
@keyframes ct-card{from{opacity:0;transform:translateY(40px) scale(.96) rotate(-1deg)}}
.ct-progress{--pct:0%;position:absolute;left:0;right:0;top:0;height:6px;background:var(--sable)}
.ct-progress::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--pct);background:linear-gradient(90deg,var(--accent),var(--citron));
  border-radius:0 6px 6px 0;transition:width .6s var(--spring-soft)}
.ct-progress::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:calc(var(--pct) - 60px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:ct-shine 1.8s linear infinite;transition:left .6s var(--spring-soft)}
@keyframes ct-shine{0%,60%{opacity:0}70%{opacity:1}100%{opacity:0}}
.ct-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:6px 0 18px}
.ct-card-head h2{font:700 var(--fs-h3)/1.1 var(--f-titre);margin:0}
.ct-progress-n{font:700 var(--fs-small)/1 var(--f-chiffre);color:var(--encre-2);font-variant-numeric:tabular-nums}

/* Puces prestation */
.ct-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;border:0;padding:0}
.ct-chips legend{font:600 var(--fs-label)/1 var(--f-texte);color:var(--encre-2);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.ct-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);border:1.5px solid var(--trait);background:var(--blanc);
  font:600 var(--fs-small)/1 var(--f-texte);color:var(--encre);cursor:pointer;transition:transform var(--t-sm) var(--spring),background var(--t-sm),border-color var(--t-sm),color var(--t-sm)}
.ct-chip i{width:9px;height:9px;border-radius:50%;background:var(--c);transition:transform var(--t-md) var(--spring)}
.ct-chip:hover{transform:translateY(-2px);border-color:var(--c)}
.ct-chip[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--c-on)}
.ct-chip[aria-pressed="true"] i{background:var(--c-on);transform:scale(1.3)}
.ct-chip:focus-visible{outline:3px solid var(--encre);outline-offset:2px}

/* Champs à libellé flottant */
.ct-fields{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.ct-field{position:relative;grid-column:span 2}
@media (min-width:560px){.ct-field--half{grid-column:span 1}}
.ct-field input,.ct-field textarea{width:100%;border:1.5px solid var(--trait);border-radius:var(--r-md);background:var(--lait);
  font:500 var(--fs-body)/1.4 var(--f-texte);color:var(--encre);padding:24px 44px 10px 16px;transition:border-color var(--t-sm),background var(--t-sm),box-shadow var(--t-md) var(--ease-out)}
.ct-field textarea{min-height:140px;resize:vertical}
.ct-field label{position:absolute;left:17px;top:17px;font:500 var(--fs-body)/1 var(--f-texte);color:var(--encre-2);pointer-events:none;transform-origin:left top;
  transition:transform var(--t-md) var(--spring-soft),color var(--t-sm)}
.ct-field label em{font-style:normal;color:var(--accent-txt)}
.ct-field input:focus,.ct-field textarea:focus{outline:none;border-color:var(--accent);background:var(--blanc);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)}
.ct-field input:focus+label,.ct-field input:not(:placeholder-shown)+label,
.ct-field textarea:focus+label,.ct-field textarea:not(:placeholder-shown)+label{transform:translateY(-10px) scale(.74);color:var(--accent-txt)}
.ct-field textarea::placeholder{color:transparent;transition:color var(--t-sm)}
.ct-field textarea:focus::placeholder{color:#9a96ad}
.ct-field input::placeholder{color:transparent}
/* coche animée quand le champ est valide */
.ct-ok{position:absolute;right:14px;top:18px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-on);display:grid;place-items:center;
  transform:scale(0) rotate(-90deg);transition:transform var(--t-md) var(--spring)}
.ct-ok svg{width:12px;height:12px}
.ct-ok path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease-out) .12s}
.ct-field.is-ok .ct-ok{transform:none}
.ct-field.is-ok .ct-ok path{stroke-dashoffset:0}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Entrée en cascade */
.ct-ready .ct-field,.ct-ready .ct-chips,.ct-ready .ct-actions{animation:ct-rise .7s var(--spring-soft) both;animation-delay:calc(.25s + var(--i,0) * 60ms)}
@keyframes ct-rise{from{opacity:0;transform:translateY(22px)}}

/* Envoi */
.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.ct-send{position:relative;overflow:hidden;opacity:.55;transition:opacity var(--t-md),transform var(--t-sm) var(--spring)}
.ct-send.is-ready{opacity:1;animation:ct-pulse 2.2s var(--ease-out) 1}
@keyframes ct-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.ct-plane{display:inline-grid;place-items:center;transition:transform .65s var(--ease-in),opacity .65s}
.ct-send.is-sending .ct-plane{animation:ct-wiggle .5s var(--ease-inout) infinite alternate}
@keyframes ct-wiggle{from{transform:translate(-2px,1px) rotate(-6deg)}to{transform:translate(2px,-1px) rotate(6deg)}}
.ct-send.is-flown .ct-plane{transform:translate(220px,-140px) rotate(18deg) scale(.6);opacity:0}
.ct-direct{font-size:var(--fs-small);color:var(--encre-2);text-decoration:underline;text-underline-offset:3px}
.ct-direct:hover{color:var(--encre)}
.ct-status{min-height:1.4em;margin:12px 0 0;font-size:var(--fs-small);color:var(--encre-2)}
.ct-status[data-tone="warn"]{color:var(--tomate-txt)}
.ct-legal{font-size:var(--fs-label);color:var(--encre-2);margin:14px 0 0;line-height:1.5}

/* Succès : la carte se replie, l'enveloppe se ferme */
.ct-card.is-sent .ct-form{animation:ct-fold .55s var(--ease-in) forwards}
@keyframes ct-fold{to{opacity:0;transform:scale(.9) translateY(-20px);filter:blur(4px)}}
.ct-card.is-sent .ct-form{pointer-events:none}
.ct-done{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:32px;gap:14px}
.ct-done[hidden]{display:none}
.ct-env{width:120px;height:84px;margin:0 auto 6px;position:relative;animation:ct-pop .7s var(--spring) .35s both}
.ct-env svg{width:100%;height:100%;overflow:visible}
.ct-env .flap{transform-origin:60px 6px;transform:rotateX(180deg);animation:ct-close .5s var(--ease-out) .9s forwards}
@keyframes ct-close{to{transform:none}}
@keyframes ct-pop{from{opacity:0;transform:scale(.4) translateY(30px)}}
.ct-done h2{font:800 var(--fs-h2)/1 var(--f-titre);margin:0;animation:ct-rise .6s var(--spring-soft) .55s both}
.ct-done p{color:var(--encre-2);max-width:26rem;margin:0 auto;animation:ct-rise .6s var(--spring-soft) .7s both}
.ct-done .btn{justify-self:center;animation:ct-rise .6s var(--spring-soft) .85s both}
.ct-confetti{position:absolute;inset:0;pointer-events:none}
.ct-confetti i{position:absolute;left:50%;top:38%;width:10px;height:10px;border-radius:50%;opacity:0;animation:ct-burst 1.1s var(--ease-out) .8s forwards}
.ct-confetti i:nth-child(odd){border-radius:3px}
@keyframes ct-burst{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(220deg) scale(1)}}

/* Mouvement réduit : tout s'affiche, rien ne bouge */
.rm .ct-orbs i,.rm .ct-tag i::after,.rm .ct-line,.rm .ct-promise li,.rm .ct-card,.rm .ct-ready .ct-field,.rm .ct-ready .ct-chips,.rm .ct-ready .ct-actions,
.rm .ct-env,.rm .ct-env .flap,.rm .ct-done *,.rm .ct-confetti i,.rm .ct-progress::after{animation:none!important;opacity:1;transform:none}
.rm .ct-confetti{display:none}
.rm .ct-card.is-sent .ct-form{animation:none;opacity:0}