/* =========================================================
   Granular — page Contact + FAQ
   Composition façon loloagency (switch Contact⇄FAQ, gros titre,
   inputs soulignés, déroulé lettre-par-lettre) aux tokens Granular.
   Dépend de styles.css (tokens :root).
   ========================================================= */

.contact-main{ min-height:100vh; }
.contact-sec{ max-width:980px; margin:0 auto;
  padding:clamp(124px,18vh,210px) var(--gut) clamp(70px,9vh,120px); }

/* ---------- hero (titre qui change + switch) ---------- */
.contact-hero{ text-align:center; }
.contact-sec .eyebrow{ font-family:var(--f-disp); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; }
.contact-title{ font-family:var(--f-disp); font-weight:700; letter-spacing:-.035em; line-height:.9;
  font-size:clamp(56px,12.5vw,170px); margin:0 0 clamp(26px,4.4vh,46px); color:var(--ink); }
.contact-title.cpop{ animation:cpop .55s var(--ease) both; }
@keyframes cpop{ from{ opacity:0; transform:translateY(18px); clip-path:inset(0 0 105% 0); }
                 to{ opacity:1; transform:none; clip-path:inset(0 0 -5% 0); } }

/* ---------- switch segmenté ---------- */
.cswitch{ position:relative; display:flex; width:min(244px,72vw); margin:0 auto;
  padding:4px; border-radius:999px; background:var(--bg-alt); border:1px solid var(--line); }
.cswitch__ind{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  border-radius:999px; background:var(--ink);
  transform:translateX(calc(var(--i,0) * 100%)); transition:transform .5s var(--ease); }
.cswitch__b{ position:relative; z-index:1; flex:1 1 0; appearance:none; border:0; background:none;
  cursor:pointer; font-family:var(--f-disp); font-weight:600; font-size:13px;
  color:var(--ink-soft); padding:8px 8px; border-radius:999px;
  transition:color .35s var(--ease); }
.cswitch__b.is-active{ color:#fff; }
.cswitch__b:focus-visible{ outline:2px solid var(--ac); outline-offset:3px; }

/* ---------- panneaux ---------- */
.cpanel{ margin-top:clamp(42px,6.5vh,80px); }
.cpanel[hidden]{ display:none; }
.cpanel.is-active{ animation:cfade .55s var(--ease) both; }
@keyframes cfade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---------- formulaire ---------- */
.cform__intent{ border:0; padding:0; margin:0 0 clamp(32px,5vh,54px); text-align:center; }
.cform__intent legend{ display:block; width:100%; font-family:var(--f-disp); font-weight:600;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.cform__intent-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cradio{ position:relative; display:inline-flex; cursor:pointer; }
.cradio input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.cradio span{ display:inline-block; padding:9px 18px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-family:var(--f-disp); font-weight:500; font-size:14px; color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.cradio input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cradio input:focus-visible + span{ outline:2px solid var(--ac); outline-offset:2px; }

.cform__grid{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vh,34px) clamp(26px,4vw,48px); max-width:760px; margin:0 auto; }
.cfield{ position:relative; }
.cfield--full{ grid-column:1 / -1; }
.cfield input, .cfield textarea{ width:100%; border:0; border-bottom:1.5px solid var(--line);
  background:transparent; font-family:var(--f-body); font-size:16px; color:var(--ink);
  padding:23px 0 9px; transition:border-color .3s var(--ease); }
.cfield textarea{ min-height:60px; resize:vertical; line-height:1.5; }
.cfield input:focus, .cfield textarea:focus{ outline:0; border-color:var(--ink); }
.cfield label{ position:absolute; left:0; top:23px; font-family:var(--f-body); font-size:16px;
  color:var(--muted); pointer-events:none; transform-origin:left top;
  transition:transform .25s var(--ease), color .25s var(--ease); }
.cfield input:focus + label, .cfield input:not(:placeholder-shown) + label,
.cfield textarea:focus + label, .cfield textarea:not(:placeholder-shown) + label{
  transform:translateY(-23px) scale(.78); color:var(--ink-soft); }

.cbtn{ display:block; margin:clamp(34px,5vh,58px) auto 0; appearance:none; cursor:pointer;
  border:0; border-radius:999px; background:var(--ink); color:#fff;
  font-family:var(--f-disp); font-weight:600; font-size:15px; padding:15px 40px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.cbtn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(10,10,12,.22); }
.cbtn:focus-visible{ outline:2px solid var(--ac); outline-offset:3px; }

/* état succès */
.cthanks{ text-align:center; padding:clamp(54px,10vh,100px) 0; animation:cfade .6s var(--ease) both; }
.cthanks h3{ font-family:var(--f-disp); font-weight:700; font-size:clamp(28px,4.4vw,46px);
  letter-spacing:-.02em; margin:0 0 12px; }
.cthanks p{ color:var(--ink-soft); max-width:440px; margin:0 auto; }

/* coordonnées */
.cmeta{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(26px,5vw,70px);
  max-width:760px; margin:clamp(50px,7.5vh,88px) auto 0; padding-top:clamp(30px,4vh,44px);
  border-top:1px solid var(--line); }
.cmeta__i{ display:flex; flex-direction:column; gap:6px; }
.cmeta__k{ font-family:var(--f-disp); font-weight:600; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.cmeta__v{ font-family:var(--f-disp); font-weight:600; font-size:clamp(15px,1.6vw,19px); color:var(--ink); }

/* ---------- FAQ (accordéon) ---------- */
.faq-top{ display:block; text-align:right; font-family:var(--f-disp); font-weight:500;
  font-size:14px; color:var(--ink-soft); margin:0 0 clamp(18px,3vh,28px); cursor:pointer; }
.faq{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:28px;
  appearance:none; border:0; background:none; cursor:pointer; text-align:left;
  padding:clamp(20px,3vh,30px) 0; font-family:var(--f-disp); font-weight:600;
  font-size:clamp(17px,2.05vw,24px); letter-spacing:-.012em; color:var(--ink);
  transition:color .25s var(--ease); }
.faq__q:hover{ color:#6a1fd6; }
.faq__q:focus-visible{ outline:2px solid var(--ac); outline-offset:3px; }
.faq__ic{ position:relative; flex:0 0 auto; width:20px; height:20px; }
.faq__ic::before, .faq__ic::after{ content:""; position:absolute; left:50%; top:50%; background:currentColor; }
.faq__ic::before{ width:16px; height:1.6px; transform:translate(-50%,-50%); }
.faq__ic::after{ width:1.6px; height:16px; transform:translate(-50%,-50%);
  transition:transform .35s var(--ease), opacity .3s var(--ease); }
.faq__item.is-open .faq__ic::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a-in{ overflow:hidden; }
.faq__a-in p{ margin:0 0 clamp(22px,3vh,30px); max-width:760px; color:var(--ink-soft);
  font-size:clamp(15px,1.05vw,17px); line-height:1.62; }

/* ---------- déroulé lettre-par-lettre (signature) ---------- */
.roll__l{ display:inline-block; overflow:hidden; line-height:1.05; vertical-align:top; }
.roll__l > span{ display:block; position:relative;
  transition:transform .45s var(--ease); transition-delay:calc(var(--i,0) * 15ms); }
.roll__l > span::after{ content:attr(data-c); position:absolute; left:0; top:100%; }
[data-roll]:hover .roll__l > span{ transform:translateY(-100%); }

/* ---------- reveal ---------- */
.fx{ opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.fx.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .fx{ opacity:1; transform:none; transition:none; }
  .contact-title.cpop, .cpanel.is-active{ animation:none; }
  .roll__l > span{ transition:none; }
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .cform__grid{ grid-template-columns:1fr; }
  .cmeta{ flex-direction:column; align-items:center; text-align:center; gap:22px; }
  .faq-top{ text-align:center; }
}