/* Page Contact (refonte) — composants .ct-*, s'appuie sur les tokens de site.css */

.contact-hero{padding-top:clamp(34px,5vw,58px);}
.contact-split{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(34px,5vw,64px);
  align-items:start;padding-bottom:var(--sec-pad);}

/* gauche : invitation */
.ct-aside{position:sticky;top:96px;}
.ct-aside h1{font-size:clamp(34px,4vw,50px);margin-top:16px;text-wrap:balance;}
.ct-aside h1 .hl{color:var(--accent);}
.ct-lead{font-size:clamp(16.5px,1.3vw,18.5px);color:var(--ink-2);margin-top:18px;max-width:32em;
  line-height:1.55;text-wrap:pretty;}

.ct-reasons{display:flex;flex-direction:column;gap:6px;margin-top:30px;}
.ct-reason{display:flex;gap:14px;align-items:flex-start;padding:13px 14px;border-radius:14px;
  border:1px solid transparent;transition:.16s;}
.ct-reason:hover{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm);}
.ct-reason .r-ico{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);}
.ct-reason .r-ico i{font-size:17px;}
.ct-reason h3{font-size:16px;letter-spacing:-0.02em;}
.ct-reason p{font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45;}

/* promesse de réponse */
.ct-promise{display:flex;align-items:center;gap:14px;margin-top:26px;padding:16px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);}
.ct-faces{display:flex;flex:none;}
.ct-faces .face{width:38px;height:38px;border-radius:50%;border:2px solid var(--surface);margin-left:-12px;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;
  font-size:14px;color:#fff;letter-spacing:-0.04em;}
.ct-faces .face:first-child{margin-left:0;}
.ct-faces .f1{background:linear-gradient(150deg,#e0795b,#c14d6b);}
.ct-faces .f2{background:linear-gradient(150deg,#3a9d78,#2b7d8f);}
.ct-faces .f3{background:linear-gradient(150deg,#6b74c1,#8a5fc1);}
.ct-promise .p-txt b{display:block;font-family:var(--font-display);font-weight:600;font-size:15.5px;
  letter-spacing:-0.01em;}
.ct-promise .p-txt span{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;margin-top:2px;}
.ct-promise .blip{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 60%,transparent);animation:blip 1.8s infinite;flex:none;}

/* canaux directs */
.ct-channels{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.ct-chan{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);transition:.16s;cursor:pointer;}
.ct-chan:hover{border-color:var(--accent-line);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.ct-chan i{font-size:15px;color:var(--accent);flex:none;}
.ct-chan .c-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);display:block;}
.ct-chan .c-v{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;}

/* renvoi centre d'aide */
.ct-help{display:flex;align-items:center;gap:13px;margin-top:18px;padding:15px 17px;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--line);transition:.16s;cursor:pointer;}
.ct-help:hover{border-color:var(--accent-line);background:var(--accent-soft);}
.ct-help .h-ico{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--accent);}
.ct-help:hover .h-ico{border-color:var(--accent-line);}
.ct-help .h-ico i{font-size:16px;}
.ct-help .h-txt{flex:1;min-width:0;}
.ct-help .h-txt b{font-size:14.5px;letter-spacing:-0.01em;}
.ct-help .h-txt p{font-size:12.5px;color:var(--ink-2);margin-top:1px;}
.ct-help .h-arr{color:var(--ink-3);flex:none;transition:.16s;}
.ct-help .h-arr i{font-size:15px;}
.ct-help:hover .h-arr{color:var(--accent);transform:translateX(2px);}

/* droite : carte formulaire */
.ct-form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;}
.ct-form-top{padding:22px 28px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));}
.ct-form-top h2{font-size:23px;letter-spacing:-0.02em;}
.ct-form-top p{font-size:13.5px;color:var(--ink-2);margin-top:5px;}
.ct-form{padding:24px 28px 28px;display:flex;flex-direction:column;gap:20px;}

.ct-field label{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;}
.ct-field label .opt{color:var(--ink-3);opacity:.7;text-transform:none;letter-spacing:0;font-size:11px;}
.ct-field label .req{color:var(--accent);margin-left:2px;}
.ct-input,.ct-textarea{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:11px;
  padding:12px 14px;font-family:var(--font-body);font-size:15px;color:var(--ink);
  transition:border-color .18s, box-shadow .18s;}
.ct-input::placeholder,.ct-textarea::placeholder{color:var(--ink-3);}
.ct-input:focus,.ct-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.ct-textarea{resize:vertical;min-height:130px;line-height:1.55;}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* input avec icône en tête */
.ct-input-wrap{position:relative;display:flex;align-items:center;}
.ct-input-wrap i{position:absolute;left:13px;color:var(--ink-3);font-size:15px;pointer-events:none;
  transition:color .18s;}
.ct-input-wrap .ct-input{padding-left:38px;}
.ct-input-wrap:focus-within i{color:var(--accent);}

/* pastilles de sujet */
.ct-subjects{display:flex;flex-wrap:wrap;gap:8px;}
.ct-subj{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;letter-spacing:-0.01em;transition:.15s;}
.ct-subj i{font-size:14px;}
.ct-subj:hover{border-color:var(--ink-3);color:var(--ink);}
.ct-subj[data-on="1"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  box-shadow:0 4px 12px -4px color-mix(in oklab,var(--accent) 55%,transparent);}

.ct-msg-meta{display:flex;justify-content:space-between;align-items:center;margin-top:7px;}
.ct-count{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);}

.ct-submit{width:100%;}
.ct-submit i{font-size:15px;}
.ct-reassure{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:2px;}
.ct-reassure span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);}
.ct-reassure i{color:var(--accent);font-size:12px;flex:none;}

/* état de confirmation */
.ct-success{display:none;flex-direction:column;align-items:center;text-align:center;
  padding:48px 32px 44px;min-height:430px;justify-content:center;}
.ct-success.show{display:flex;}
.ct-success .s-badge{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--accent);display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;}
.ct-success .s-badge i{font-size:27px;}
.ct-success h2{font-size:25px;letter-spacing:-0.02em;line-height:1.2;}
.ct-success p{font-size:15px;color:var(--ink-2);margin-top:10px;max-width:30em;line-height:1.55;}
.ct-success .btn{margin-top:24px;}

.ct-err{color:color-mix(in oklab,var(--color-danger,#cf5050) 80%,var(--ink));font-size:12.5px;margin-top:6px;}

@media (max-width:880px){
  .contact-split{grid-template-columns:1fr;gap:36px;}
  .ct-aside{position:static;}
}
@media (max-width:560px){
  .ct-row{grid-template-columns:1fr;}
  .ct-form,.ct-form-top{padding-inline:20px;}
}