/* ====================================================================
   FX-CONTACT — la page « Votre projet » répond au geste (passe 2027)
   --------------------------------------------------------------------
   La phrase prend vie à la frappe, le brief se construit dans la
   colonne de gauche, une jauge avance, l'envoi devient un moment.
   Pas de nouvelle couleur, pas de nouvelle typographie.
   ==================================================================== */

/* ---- 1. LA PHRASE PREND VIE ---------------------------------------- */
.vp27-phrase{position:relative}
.vp27-phrase input,.vp27-phrase select{transition:border-color .3s,background .3s,color .3s,box-shadow .3s,opacity .3s}
/* placeholders lisibles */
.vp27-phrase input::placeholder{opacity:.62;font-size:.9em}
/* champ rempli : vert profond, filet ambre */
.vp27-phrase .vp27-champ.rempli input,.vp27-phrase .vp27-champ.rempli select{color:var(--vert);font-style:normal;border-bottom-color:var(--ambre)}
body.dark .vp27-phrase .vp27-champ.rempli input,body.dark .vp27-phrase .vp27-champ.rempli select{color:#F2E9D0}
/* champ actif : halo ambre, le reste de la phrase s'estompe */
.vp27-phrase input:focus,.vp27-phrase select:focus{box-shadow:0 0 0 6px color-mix(in oklab,var(--ambre) 16%,transparent);border-radius:4px}
.vp27-phrase.focus-dedans>*:not(.vp27-champ),.vp27-phrase.focus-dedans .vp27-champ:not(.actif){opacity:.45;transition:opacity .35s}
.vp27-phrase>*{transition:opacity .35s}
/* phrase complète : elle se pose */
.vp27-phrase.complete input,.vp27-phrase.complete select{border-bottom-color:transparent;background:transparent;box-shadow:none}
.vp27-phrase.complete .vp27-champ{position:relative}
.vp27-phrase.complete .vp27-champ::after{content:"";position:absolute;left:.15em;right:.15em;bottom:1px;height:1px;background:var(--ambre);opacity:.55;transform:scaleX(1);transform-origin:left}
.vp27-phrase.complete input:focus,.vp27-phrase.complete select:focus{border-bottom-color:var(--ambre);box-shadow:0 0 0 6px color-mix(in oklab,var(--ambre) 16%,transparent)}

/* ---- 2. LE BRIEF SE CONSTRUIT DANS LA COLONNE DE GAUCHE ------------- */
.vp27-recap{margin-top:26px;padding:20px 22px 22px;border:1px solid var(--bord-fort);border-radius:16px;
  background:color-mix(in oklab,var(--sauge) 40%,transparent);display:none;
  animation:vp27-recapIn .5s cubic-bezier(.22,1,.36,1) both}
.vp27-recap.on{display:block}
body.dark .vp27-recap{background:color-mix(in oklab,var(--champagne) 6%,transparent)}
@keyframes vp27-recapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vp27-recap .eyebrow{display:block;margin-bottom:10px}
.vp27-recap p{margin:0;font-family:'Instrument Serif','Serif secours',Georgia,serif;font-size:1.28rem;line-height:1.3;color:var(--vert);text-wrap:balance}
body.dark .vp27-recap p{color:#F2E9D0}
.vp27-recap p em{font-style:italic;color:var(--or)}
.vp27-recap p b{font-weight:400;display:inline-block;animation:vp27-motIn .4s cubic-bezier(.22,1,.36,1) both}
@keyframes vp27-motIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.vp27-recap small{display:block;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or);opacity:.8}

/* ---- 3. LA JAUGE --------------------------------------------------- */
.vp27-jauge{position:relative;height:2px;margin:0 0 26px;background:color-mix(in oklab,var(--vert) 12%,transparent);border-radius:2px;overflow:hidden}
.vp27-jauge i{position:absolute;inset:0;background:var(--ambre);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.vp27-jauge-l{display:flex;justify-content:space-between;margin:0 0 8px;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
.vp27-jauge-l span:last-child{opacity:.7;font-variant-numeric:tabular-nums}
/* le bouton s'allume quand le minimum est là */
.vp27-envoi .btn{transition:opacity .35s,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,background-color .22s}
.vp27-form:not(.pret) .vp27-envoi .btn{opacity:.55}
.vp27-form.pret .vp27-envoi .btn{opacity:1;box-shadow:0 10px 28px -14px rgba(184,137,47,.6)}

/* ---- 4. « PRÉCISER MON BRIEF » S'OUVRE EN GLISSANT ------------------- */
.vp27-plus{transition:background .3s,border-color .3s}
.vp27-plus summary{transition:color .2s}
.vp27-plus summary i{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.vp27-plus[open] summary i{transform:rotate(45deg)}
.vp27-plus-c{animation:vp27-ouvre .55s cubic-bezier(.22,1,.36,1) both}
@keyframes vp27-ouvre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@supports (interpolate-size:allow-keywords){
  .vp27-plus{interpolate-size:allow-keywords}
  .vp27-plus::details-content{overflow:hidden;block-size:0;transition:block-size .5s cubic-bezier(.22,1,.36,1),content-visibility .5s allow-discrete}
  .vp27-plus[open]::details-content{block-size:auto}
}
/* les puces répondent */
.vp27-puces label span{transition:background .25s,color .25s,border-color .25s,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
@media(hover:hover){.vp27-puces label:hover span{transform:translateY(-1px);box-shadow:0 4px 12px -8px rgba(29,74,59,.45)}}
.vp27-puces label input:checked+span{transform:scale(1.04)}
.vp27-puces label:active span{transform:scale(.96)}

/* ---- 5. L'ENVOI DEVIENT UN MOMENT ---------------------------------- */
.vp27-envoi .btn:active{transform:translateY(1px) scale(.985)}
.vp27-envoi .btn.envoi{position:relative;color:transparent!important;pointer-events:none;overflow:hidden}
.vp27-envoi .btn.envoi::before{content:attr(data-envoi);position:absolute;inset:0;display:grid;place-items:center;color:#1B1204;font-size:.92em;letter-spacing:.14em}
.vp27-envoi .btn.envoi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#1B1204;opacity:.35;transform-origin:left;animation:vp27-envoiBar 1.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes vp27-envoiBar{from{transform:scaleX(0)}70%{transform:scaleX(1)}to{transform:scaleX(1);opacity:0}}
/* le merci arrive avec sa coche */
.vp27-merci{position:relative;padding-top:6px}
.vp27-merci .vp27-coche{width:64px;height:64px;margin:0 0 22px;display:block}
.vp27-merci .vp27-coche circle{fill:none;stroke:var(--ambre);stroke-width:1.5;stroke-dasharray:190;stroke-dashoffset:190}
.vp27-merci .vp27-coche path{fill:none;stroke:var(--vert);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
body.dark .vp27-merci .vp27-coche path{stroke:#F2E9D0}
@media (prefers-reduced-motion:no-preference){
  .vp27-merci:not([hidden]){animation:vp27-merciIn .7s cubic-bezier(.22,1,.36,1) both}
  @keyframes vp27-merciIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .vp27-merci:not([hidden]) .vp27-coche circle{animation:vp27-cercle 1.1s cubic-bezier(.22,1,.36,1) .2s both}
  .vp27-merci:not([hidden]) .vp27-coche path{animation:vp27-trait .55s cubic-bezier(.22,1,.36,1) 1s both}
  @keyframes vp27-cercle{to{stroke-dashoffset:0}}
  @keyframes vp27-trait{to{stroke-dashoffset:0}}
  .vp27-merci:not([hidden]) .eyebrow,.vp27-merci:not([hidden]) h2,.vp27-merci:not([hidden]) p,.vp27-merci:not([hidden]) .btn{animation:vp27-merciIn .6s cubic-bezier(.22,1,.36,1) both}
  .vp27-merci:not([hidden]) h2{animation-delay:.35s}.vp27-merci:not([hidden]) p{animation-delay:.5s}.vp27-merci:not([hidden]) .btn{animation-delay:.65s}
}
@media (prefers-reduced-motion:reduce){.vp27-merci .vp27-coche circle,.vp27-merci .vp27-coche path{stroke-dashoffset:0}}

/* ---- 6. MOBILE : LE FORMULAIRE D'ABORD ------------------------------ */
@media(max-width:860px){
  .vp27-grille{display:grid}
  .vp27-cote{order:2}
  .vp27-brief{order:1}
  .vp27-cote h1{display:none}
  .vp27-brief::before{content:attr(data-titre);display:block;font-family:'Instrument Serif','Serif secours',Georgia,serif;font-size:clamp(2rem,8.5vw,2.6rem);line-height:1.05;color:var(--vert);margin:0 0 22px;letter-spacing:-.02em;text-wrap:balance}
  body.dark .vp27-brief::before{color:#F2E9D0}
  .vp27-recap{display:none!important}
}

/* ---- 7. LA COLONNE DE GAUCHE ET LES ENGAGEMENTS RÉPONDENT ------------ */
@media(hover:hover){
  .vp27-direct a{transition:color .2s,text-decoration-color .2s;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em}
  .vp27-direct a:hover{color:var(--or);text-decoration-color:currentColor}
  .vp27-direct>div{transition:transform .25s cubic-bezier(.22,1,.36,1)}
  .vp27-direct>div:hover{transform:translateX(3px)}
  .eng27-grille article{transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s;border-radius:14px;padding-inline:14px;margin-inline:-14px}
  .eng27-grille article:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--vert,#1D4A3B) 3.5%,transparent)}
  .vp27-fichier{transition:border-color .25s,background .25s}
  .vp27-fichier:hover{border-color:var(--or)}
  .vp27-suite li{transition:transform .25s cubic-bezier(.22,1,.36,1)}
  .vp27-suite li:hover{transform:translateX(3px)}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes vp27-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
    html body .eng27-grille article{animation:vp27-in linear both;animation-timeline:view();animation-range:entry 8% entry 46%}
    html body .eng27-grille article:nth-child(2){animation-range:entry 12% entry 50%}
    html body .eng27-grille article:nth-child(3){animation-range:entry 16% entry 54%}
    html body .eng27-grille article:nth-child(4){animation-range:entry 20% entry 58%}
    html body .eng27-grille article:nth-child(5){animation-range:entry 24% entry 62%}
  }
}
html body .eng27 h2{font-size:clamp(2.4rem,4.2vw,3.7rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance;max-width:16ch}
html body .eng27{padding-block:104px 108px}
@media(max-width:800px){html body .eng27{padding-block:72px 64px}}