/* REM — styles propres à la page contact.html (chargés après main.css) */
@media (prefers-reduced-motion:reduce){
    .intro-sigle{ display:none; }
    .intro-rem{ opacity:1; clip-path:none; }
    body.loaded #intro{ opacity:0; transition:opacity .5s; }
  }
@media (prefers-reduced-motion:reduce){
    header .logo, nav li, .bounce-ball-wrap{ opacity:1; translate:none; }
  }
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.3em; margin-bottom:-.3em; }
.bounce-ball-wrap{
    position:absolute; right:clamp(1.4rem,4vw,3.4rem); bottom:clamp(2.2rem,5vw,3.4rem);
    display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:3;
  }
.bounce-ball{
    width:22px; height:22px; border-radius:50%; background:var(--blue-2);
    animation:ballBounce 1.1s cubic-bezier(.5,0,1,.5) infinite alternate;
  }
.bounce-shadow{
    width:22px; height:5px; border-radius:50%; background:var(--blue-2); opacity:.25;
    animation:shadowSquash 1.1s cubic-bezier(.5,0,1,.5) infinite alternate;
  }
@keyframes ballBounce{ from{ transform:translateY(0); } to{ transform:translateY(-46px); } }
@keyframes shadowSquash{ from{ transform:scale(1); opacity:.25; } to{ transform:scale(.5); opacity:.08; } }
/* chaque logo a la même surface visuelle, quel que soit son format */
.client-logo img{ display:block; object-fit:contain; opacity:.9; }
h2 .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.3em; margin-bottom:-.3em; }
.pillars{ position:relative; display:flex; flex-direction:column; gap:clamp(2rem,6vh,4rem); padding-bottom:4vh; }
.pillar{
    --top:calc(88px + var(--i) * 14px);
    position:sticky; top:var(--top);
    height:calc(100svh - var(--top) - 24px); min-height:460px;
    border-radius:clamp(22px,3vw,44px); overflow:hidden;
    background:var(--bg); color:var(--fg);
    box-shadow:0 -18px 50px rgba(11,15,20,.14);
    transform-origin:center top; will-change:transform;
  }
.pillar-inner{
    height:100%; display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.6rem,4vw,4rem);
    padding:clamp(1.8rem,4vw,3.6rem);
  }
.pillar-copy{ display:flex; flex-direction:column; justify-content:center; gap:1.3rem; }
.inline-logo{ display:inline-block; height:.78em; width:auto; vertical-align:baseline; margin:0 .08em; transform:translateY(.02em); }
.pillar-tag{
    align-self:flex-start; font-size:.82rem; font-weight:700; padding:.55rem 1.1rem;
    border:1px solid currentColor; border-radius:100px; opacity:.85; color:inherit;
    display:inline-flex; align-items:center; gap:.45rem;
    transition:background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
  }
.pillar-tag:hover{ background:var(--fg); color:var(--bg); opacity:1; }
.pillar-tag .arr{ transition:transform .3s var(--ease); }
.pillar-tag:hover .arr{ transform:translate(2px,-2px); }
.pillar h3{
    font-family:var(--font); font-weight:800; letter-spacing:-.02em; line-height:.95;
    font-size:clamp(2.4rem,5.6vw,5.2rem);
  }
.pillar-copy p{ font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.6; max-width:430px; opacity:.86; }
.pillar-visual{ position:relative; display:flex; flex-direction:column; justify-content:center; }
.pillar-visual ul{ list-style:none; }
.pillar-visual li{
    font-weight:700; font-size:clamp(1.3rem,2.7vw,2.4rem); letter-spacing:-.015em; line-height:1.15;
    padding:.4rem 0;
    opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
.pillar.on .pillar-visual li{ opacity:1; transform:none; }
.pillar.on .pillar-visual li:nth-child(2){ transition-delay:.08s; }
.pillar.on .pillar-visual li:nth-child(3){ transition-delay:.16s; }
.pillar.on .pillar-visual li:nth-child(4){ transition-delay:.24s; }
.pillar.on .pillar-visual li:nth-child(5){ transition-delay:.32s; }
.pillar.on .pillar-visual li:nth-child(6){ transition-delay:.40s; }
.pillar.on .pillar-visual li:nth-child(7){ transition-delay:.48s; }
@media (max-width:860px){
    .pillar{ --top:calc(76px + var(--i) * 10px); min-height:0; height:auto; }
    .pillar-inner{ grid-template-columns:1fr; }
  }
@media (prefers-reduced-motion:reduce){
    .pillar{ transform:none !important; }
    .pillar-visual li{ opacity:1; transform:none; transition:none; }
  }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; gap:2.6rem; } }
/* ---------- process / scrollytelling ---------- */
#approche{ display:block; }
#approche .section-head{ position:sticky; top:110px; margin-bottom:0; align-self:start; }
#approche{ align-items:center; }
@media (prefers-reduced-motion:reduce){ .wcard, .wcard-inner, .wcard-v{ transition:none; } }
@media (max-width:900px){
    #approche{ display:block; }
    #approche .section-head{ position:static; margin-bottom:3rem; }
  }
.xp-list li{ padding:1.4rem 0; border-top:1px solid var(--rule); }
.xp-list li:last-child{ border-bottom:1px solid var(--rule); }
@media (max-width:860px){ .xp-grid{ grid-template-columns:1fr; } .xp-copy{ position:static; } }
.benefit{ border-top:1px solid var(--line); padding-top:1.6rem; }
@media (max-width:860px){ .benefits{ grid-template-columns:1fr; } }
/* ---------- contact : formulaire rédigé comme une lettre ---------- */
.socials{ display:flex; gap:.9rem; margin-top:2.4rem; }
.socials{ gap:1.4rem !important; }
.socials a{ display:inline-flex; color:var(--grey-l); transition:color .3s var(--ease), transform .3s var(--ease); }
.socials a:hover{ color:var(--blue-2); transform:translateY(-2px); }
.socials svg{ width:26px; height:26px; }
.letter-form{ display:flex; flex-direction:column; gap:2.2rem; }
.letter{ font-size:clamp(1.3rem,2.4vw,2rem); font-weight:700; line-height:1.9; letter-spacing:-.01em; }
.letter input, .letter select{
    font:inherit; color:var(--blue-2); background:transparent; border:0; border-bottom:2px solid var(--line);
    padding:0 .15em; margin:0 .1em; border-radius:0; min-width:4ch; max-width:100%;
    transition:border-color .3s var(--ease);
  }
.letter select{ cursor:pointer; -webkit-appearance:none; appearance:none; padding-right:1.1em;
    background:linear-gradient(45deg,transparent 50%,var(--blue-2) 50%) right .35em top 55%/.32em .32em no-repeat,
               linear-gradient(135deg,var(--blue-2) 50%,transparent 50%) right .03em top 55%/.32em .32em no-repeat; }
.letter select option{ color:#0B0F19; font-size:1rem; }
.letter input::placeholder{ color:rgba(242,245,249,.32); }
.letter input:focus, .letter select:focus{ outline:none; border-bottom-color:var(--blue-2); }
.letter-msg{ display:flex; flex-direction:column; gap:.8rem; }
.letter-msg span{ font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:700; }
.letter-msg textarea{
    font:inherit; font-size:1.1rem; line-height:1.6; color:var(--grey-l); resize:vertical; min-height:130px;
    background:transparent; border:0; border-bottom:2px solid var(--line); padding:.4rem 0;
  }
.letter-msg textarea::placeholder{ color:rgba(242,245,249,.32); }
.letter-msg textarea:focus{ outline:none; border-bottom-color:var(--blue-2); }
.letter-form .btn{ align-self:flex-start; border:0; cursor:pointer; font:inherit; font-weight:700; }
.letter-form .btn .fill{ background:var(--blue); }
/* bouton bleu au survol */
@media (max-width:860px){ .contact-grid, .contact-form{ grid-template-columns:1fr; } }
/* ---------- envoi : la signature R appuie sur le cube, qui part comme un message ---------- */
.sent{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem; }
.sent[hidden], .letter-form[hidden]{ display:none; }
.sent-sig{ width:clamp(150px,18vw,210px); height:auto; overflow:visible; }
.sent-copy{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .7s var(--ease); max-width:560px; }
.sent.show-copy .sent-copy{ opacity:1; transform:none; }
.sent-copy h3{ font-weight:800; font-size:clamp(2.2rem,4.5vw,3.6rem); letter-spacing:-.02em; line-height:1; }
.sent-copy p{ margin-top:1.1rem; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.6; }
.sent-copy .sent-help{ font-size:.95rem; color:var(--text-dim); }
.sent-copy .sent-help a{ color:var(--blue-2); text-decoration:underline; text-underline-offset:3px; }
.sent-again{ margin-top:1.8rem; background:none; border:0; border-bottom:2px solid var(--blue-2); color:var(--grey-l); font:inherit; font-weight:700; padding:0 0 3px; cursor:pointer; }
.sent-again:hover{ color:var(--blue-2); }
.letter-form.leaving{ opacity:0; transform:translateY(-12px); transition:opacity .35s var(--ease), transform .4s var(--ease); }
.contact-info p.contact-zone{ font-size:1rem; font-weight:500; line-height:1.6; max-width:340px; }

/* envoi du formulaire (send-mail.php) */
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.letter-form .btn:disabled{ cursor:progress; opacity:.7; transform:none; }
.form-error{ max-width:560px; font-size:.95rem; line-height:1.6; color:#FF8A8A; }
.form-error[hidden]{ display:none; }
.form-error a{ color:var(--blue-2); text-decoration:underline; text-underline-offset:3px; }