/* Souplesse Studio — section Contact partagée (accueil, À propos). Socle : base.css. */

@keyframes spPillPulse{0%,100%{box-shadow:0 0 14px 2px rgba(242,241,236,.28),0 0 34px 6px rgba(242,241,236,.12)}50%{box-shadow:0 0 26px 6px rgba(242,241,236,.55),0 0 64px 18px rgba(242,241,236,.26)}}

.ct{overflow:hidden;padding:clamp(120px,13cqw,200px) 0 0;display:flex;flex-direction:column;gap:clamp(24px,3cqw,44px)}
.ct-pill{position:absolute;left:0;top:0;z-index:6;pointer-events:none;will-change:transform;display:none}
.ct-pill-in{opacity:0;transform:scale(.3);transition:opacity .2s}
.ct-pill-body{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--fg);color:var(--bg);animation:spPillPulse 2.2s ease-in-out infinite}
.ct-ic{position:relative;display:inline-block;width:16px;height:16px;flex:none}
.ct-ic>span{position:absolute;box-sizing:content-box;transition:opacity .25s,transform .35s}
.ct-ic .ic-a{left:0;top:3px;width:10px;height:12px;border:1.8px solid currentColor;border-radius:2px}
.ct-ic .ic-b{left:5px;top:0;width:10px;height:12px;border:1.8px solid currentColor;border-radius:2px;background:var(--fg)}
.ct-ic .ic-ok{left:3px;top:0;font-size:15px;font-weight:700;line-height:16px;opacity:0}
.ct.is-copied .ic-a{opacity:0;transform:translateX(3px)}
.ct.is-copied .ic-b{opacity:0;transform:translateX(-3px)}
.ct.is-copied .ic-ok{opacity:1}
@media (hover:hover) and (pointer:fine){.ct-pill{display:block}}

.ct-o{position:absolute;left:0;right:0;top:0;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;opacity:0;transform:scale(.7);will-change:transform,opacity}
.ct-shape{width:62cqw;aspect-ratio:997/548;position:relative;overflow:hidden;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20568.13%20307.16%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M187.01%2C62.07c-28.94%2C8.68-51.56%2C20.98-67.86%2C36.9-16.31%2C15.93-24.46%2C34.13-24.46%2C54.61s8.15%2C38.68%2C24.46%2C54.61c16.3%2C15.93%2C38.92%2C28.23%2C67.86%2C36.9%2C28.93%2C8.68%2C61.28%2C13.01%2C97.06%2C13.01v49.06c-53.14%2C0-101.27-6.75-144.4-20.26-43.14-13.51-77.2-31.92-102.18-55.25C12.49%2C208.33%2C0%2C182.31%2C0%2C153.58s12.49-54.75%2C37.48-78.07c24.98-23.32%2C59.05-41.73%2C102.18-55.25C182.79%2C6.76%2C230.93%2C0%2C284.07%2C0v49.06c-35.78%2C0-68.13%2C4.34-97.06%2C13.01ZM381.12%2C245.09c28.93-8.67%2C51.55-20.97%2C67.86-36.9%2C16.3-15.92%2C24.46-34.13%2C24.46-54.61s-8.16-38.67-24.46-54.61c-16.31-15.92-38.94-28.22-67.86-36.9-28.94-8.67-61.29-13.01-97.06-13.01V0c53.13%2C0%2C101.26%2C6.76%2C144.4%2C20.26%2C43.13%2C13.51%2C77.19%2C31.93%2C102.18%2C55.25%2C24.98%2C23.32%2C37.48%2C49.35%2C37.48%2C78.07s-12.5%2C54.75-37.48%2C78.07c-24.99%2C23.33-59.06%2C41.74-102.18%2C55.25-43.14%2C13.51-91.27%2C20.26-144.4%2C20.26v-49.06c35.77%2C0%2C68.12-4.33%2C97.06-13.01Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20568.13%20307.16%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M187.01%2C62.07c-28.94%2C8.68-51.56%2C20.98-67.86%2C36.9-16.31%2C15.93-24.46%2C34.13-24.46%2C54.61s8.15%2C38.68%2C24.46%2C54.61c16.3%2C15.93%2C38.92%2C28.23%2C67.86%2C36.9%2C28.93%2C8.68%2C61.28%2C13.01%2C97.06%2C13.01v49.06c-53.14%2C0-101.27-6.75-144.4-20.26-43.14-13.51-77.2-31.92-102.18-55.25C12.49%2C208.33%2C0%2C182.31%2C0%2C153.58s12.49-54.75%2C37.48-78.07c24.98-23.32%2C59.05-41.73%2C102.18-55.25C182.79%2C6.76%2C230.93%2C0%2C284.07%2C0v49.06c-35.78%2C0-68.13%2C4.34-97.06%2C13.01ZM381.12%2C245.09c28.93-8.67%2C51.55-20.97%2C67.86-36.9%2C16.3-15.92%2C24.46-34.13%2C24.46-54.61s-8.16-38.67-24.46-54.61c-16.31-15.92-38.94-28.22-67.86-36.9-28.94-8.67-61.29-13.01-97.06-13.01V0c53.13%2C0%2C101.26%2C6.76%2C144.4%2C20.26%2C43.13%2C13.51%2C77.19%2C31.93%2C102.18%2C55.25%2C24.98%2C23.32%2C37.48%2C49.35%2C37.48%2C78.07s-12.5%2C54.75-37.48%2C78.07c-24.99%2C23.33-59.06%2C41.74-102.18%2C55.25-43.14%2C13.51-91.27%2C20.26-144.4%2C20.26v-49.06c35.77%2C0%2C68.12-4.33%2C97.06-13.01Z%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ct-shape-bg{position:absolute;inset:0;background:#1b1b1a}
.ct-reveal{position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 0,#000 42%,transparent 100%);mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 0,#000 42%,transparent 100%)}
/* Tactile : pas de curseur pour révéler le « O », il est donc révélé en entier mais atténué
   pour garder le texte blanc lisible ; il s'illumine au toucher (voir accueil.js). */
@media (hover:none),(pointer:coarse){.ct-reveal{--r:300cqw;opacity:.32}}
.ct-gl{position:absolute;inset:0;width:100%;height:100%;display:block}

.ct-main{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(4px,.6cqw,10px);margin:0 var(--px);padding:clamp(22px,2.4cqw,40px) 0;border-top:var(--line);border-bottom:var(--line);color:transparent;transition:color .55s ease;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){.ct-main:hover{color:var(--fg);opacity:1}}
.ct-l1,.ct-l2{font-size:clamp(28px,4.6cqw,76px);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.005em}
.ct-l1{color:var(--fg)}
.ct-l2{display:flex;align-items:center;gap:clamp(16px,2cqw,36px);-webkit-text-stroke:clamp(1px,.12cqw,2px) var(--fg)}
.ct-info{margin-top:clamp(10px,1.4cqw,22px);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px clamp(16px,2.2cqw,36px);max-width:100%}
.ct-mail,.ct-sep,.ct-tel{font-size:clamp(20px,2.5cqw,38px);font-weight:300;color:var(--fg);-webkit-text-stroke:0}
.ct-mail,.ct-tel{letter-spacing:.02em}
.ct-sep{opacity:.6}
.ct-tel{opacity:.85}
.ct-touch-hint{display:none;margin-top:clamp(10px,2cqw,16px);color:var(--mute);-webkit-text-stroke:0}
@media (hover:none){.ct-touch-hint{display:block}}

.ct-about{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 var(--px);padding:clamp(12px,1.2cqw,18px) 0;border-bottom:var(--line);color:var(--mute);transition:color .3s ease}
.ct-about>span:first-child{font-size:clamp(13px,1.2cqw,17px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.ct-about>span:last-child{flex:none;font-size:clamp(16px,1.5cqw,22px);line-height:1}
@media (hover:hover) and (pointer:fine){.ct-about:hover{color:var(--fg);opacity:1}}
@media (pointer:coarse){.ct-about{padding-top:16px;padding-bottom:16px}}
.ct-loc{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;padding:0 var(--px);color:var(--mute)}
.ct-foot{position:relative;z-index:2;background:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:clamp(16px,1.6cqw,24px) var(--px);border-top:var(--line);color:var(--mute)}
@media (pointer:coarse){.ct-foot a{padding:10px 0;margin:-10px 0}}
@media (max-width:759px){
  .ct-shape{width:96cqw}
  .ct-sep{display:none}
  .ct-mail,.ct-tel{font-size:clamp(15px,5cqw,20px)}
}

@media (prefers-reduced-motion:reduce){.ct-pill-body{animation:none}}
/* TEST « jeu clicker » : éclair de lumière quand le « O » explose (créé puis retiré par contact.js) */
.ct-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.95) 0%,rgba(242,241,236,.55) 30%,rgba(242,241,236,0) 70%)}
/* TEST « jeu clicker » : « +1 » qui s'envole à chaque clic (dès le 2e) */
.ct-plus{position:absolute;z-index:4;pointer-events:none;font-family:var(--ff);font-weight:800;font-size:clamp(16px,1.6cqw,24px);color:#f2f1ec;mix-blend-mode:difference;white-space:nowrap;opacity:0}
/* Easter egg Asteroids (js/asteroids.js) : plein écran noir par-dessus tout le site */
.ast{position:fixed;inset:0;z-index:9999;background:#000;opacity:0;transition:opacity .45s ease;outline:none;cursor:none}
.ast.is-on{opacity:1}
.ast-cv{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.ast-quit{position:absolute;top:22px;right:24px;font:500 13px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#f2f1ec;background:none;border:1px solid rgba(242,241,236,.35);border-radius:99px;padding:9px 14px;cursor:pointer;transition:background .2s,color .2s}
.ast-quit:hover{background:#f2f1ec;color:#000}
.ast-mail{position:absolute;left:50%;top:80%;transform:translate(-50%,-50%);font:500 13px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#000;background:#f2f1ec;border:0;border-radius:99px;padding:12px 18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.ast-mail.is-on{opacity:1;pointer-events:auto}
.ast-mail:hover{background:#fff}
.ast-help{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,241,236,.5);pointer-events:none}