/* =====================================================================
   Murphy — Pages FAQ (/faq) et Contact (/contact)
   Reprend le langage visuel de la home (refonte wireframe juillet 2026) :
   mêmes jetons de couleur, même typographie Anton/DM Sans, mêmes cartes
   douces et même révélation au scroll. Feuille autonome (scopée .fq) : elle
   ne dépend pas de home.css, mais en reprend les valeurs à l'identique.
   ===================================================================== */
.fq{
  --fq-blue:#4F7FCE;
  --fq-blue-d:#3F6CBA;
  --fq-pink:#DB90A4;
  --fq-ink:#14181F;
  --fq-line:rgba(20,24,31,.10);
  --fq-soft:linear-gradient(120deg,#EAF0FB,#F7EAF0 46%,#FBF1E2 72%,#FDEDE8);
  position:relative;
  color:var(--fq-ink);
  overflow-x:clip;
  /* Les halos portent sur toute la page, pas sur le seul en-tête : sinon ils
     sont tranchés net à la limite du hero et laissent une couture visible. */
  background:
    radial-gradient(1100px 520px at 86% -4%,rgba(106,151,219,.17),transparent 62%),
    radial-gradient(900px 620px at -10% 34%,rgba(219,144,164,.13),transparent 58%),
    #FBFBFD;
  background-repeat:no-repeat;
}
.fq *,.fq *::before,.fq *::after{box-sizing:border-box;}
.fq .container{max-width:1180px;margin:0 auto;padding:0 26px;}
.fq a{color:var(--fq-blue);font-weight:600;}

/* Révélation au scroll — masquée seulement si le JS a pris la main, la page
   reste donc entièrement lisible sans JavaScript. */
.fq [data-reveal]{transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1);}
.fq-js .fq [data-reveal]{opacity:0;transform:translateY(28px);}
.fq-js .fq [data-reveal].in{opacity:1;transform:none;}
.fq [data-reveal-d="1"]{transition-delay:.08s;}
.fq [data-reveal-d="2"]{transition-delay:.16s;}
.fq [data-reveal-d="3"]{transition-delay:.24s;}

/* =====================================================================
   EN-TÊTE
   ===================================================================== */
/* Fond hérité de .fq. `overflow-clip-margin` laisse la pointe du cœur
   déborder sous l'en-tête, comme sur la home, plutôt que de la trancher net. */
.fq-hero{
  position:relative;overflow:clip;overflow-clip-margin:200px;
  padding:clamp(48px,7vw,88px) 0 clamp(34px,4.5vw,54px);
}
.fq-hero .container{position:relative;z-index:2;max-width:880px;}

/* Cœur de marque en filigrane, incliné comme sur la home. Assez grand pour
   marquer la page, assez contenu pour rester reconnaissable comme un cœur :
   au-delà, seul un arc traverse le bloc et le motif devient illisible. */
.fq-hero-heart{
  position:absolute;z-index:1;right:-30px;top:52%;
  transform:translateY(-50%) rotate(14deg);
  height:132%;width:auto;opacity:.11;pointer-events:none;
}
.fq-hero-heart path{fill:none;stroke:var(--fq-blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* `width:fit-content` plutôt que `inline-flex` : le bouton garde sa largeur
   utile mais occupe sa propre ligne, sinon le kicker vient se coller à côté. */
.fq-back{
  display:flex;width:fit-content;align-items:center;gap:7px;
  font-weight:700;font-size:0.8125rem;letter-spacing:.02em;color:var(--fq-ink)!important;
  background:rgba(255,255,255,.7);border:1.4px solid var(--fq-line);border-radius:999px;
  padding:9px 16px;margin-bottom:22px;backdrop-filter:blur(6px);
  transition:transform .18s cubic-bezier(.16,.84,.44,1),border-color .2s,box-shadow .25s;
}
.fq-back:hover{transform:translateX(-3px);border-color:var(--fq-blue);box-shadow:0 8px 22px -12px rgba(79,127,206,.6);}

.fq-kicker{
  display:inline-block;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-size:0.7812rem;color:var(--fq-blue);margin-bottom:12px;
}
.fq-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.25rem,5.4vw,4.25rem);line-height:.98;letter-spacing:-.01em;
  margin:0 0 18px;color:var(--fq-ink);text-wrap:balance;
  /* Laisse respirer les accents des capitales (É, À) que la police display
     fait déborder vers le haut. */
  padding-top:.06em;
}
.fq-title .grad{color:var(--fq-blue);}
.fq-title .grad-pink{color:var(--fq-pink);}
.fq-lead{font-size:clamp(1rem,1.5vw,1.1875rem);color:#3A414F;line-height:1.6;margin:0;max-width:620px;}

/* =====================================================================
   RECHERCHE + FILTRES (FAQ)
   ===================================================================== */
.fq-tools{margin-top:26px;display:flex;flex-direction:column;gap:14px;}

.fq-search{position:relative;max-width:520px;width:100%;}
.fq-search svg{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#8A93A6;pointer-events:none;
}
.fq-search input{
  width:100%;font:inherit;font-size:0.9688rem;color:var(--fq-ink);
  background:#fff;border:1.4px solid var(--fq-line);border-radius:999px;
  padding:14px 20px 14px 46px;
  box-shadow:0 10px 28px -18px rgba(20,24,31,.4);
  transition:border-color .2s,box-shadow .25s;
}
.fq-search input::placeholder{color:#8A93A6;}
.fq-search input:focus{
  outline:none;border-color:var(--fq-blue);
  box-shadow:0 0 0 4px rgba(79,127,206,.14),0 10px 28px -18px rgba(20,24,31,.4);
}

.fq-filters{display:flex;flex-wrap:wrap;gap:9px;}
.fq-chip{
  font:inherit;font-weight:700;font-size:0.8438rem;color:#4A5364;cursor:pointer;
  background:rgba(255,255,255,.75);border:1.4px solid var(--fq-line);border-radius:999px;
  padding:9px 17px;backdrop-filter:blur(6px);
  transition:color .2s,border-color .2s,background .2s,transform .18s cubic-bezier(.16,.84,.44,1);
}
.fq-chip:hover{transform:translateY(-1px);border-color:rgba(79,127,206,.5);color:var(--fq-blue);}
.fq-chip[aria-pressed="true"]{background:var(--fq-blue);border-color:var(--fq-blue);color:#fff;
  box-shadow:0 12px 26px -14px rgba(79,127,206,.75);}

/* =====================================================================
   CORPS
   ===================================================================== */
.fq-body{position:relative;z-index:2;padding:clamp(30px,4vw,50px) 0 clamp(56px,7vw,96px);}
/* 880px = largeur de lecture confortable pour une suite de questions. La page
   Contact, elle, tient deux colonnes et a besoin de plus d'air. */
.fq-body .container{max-width:880px;}
.fq-body .container.ct-grid{max-width:1080px;}

.fq-block{margin-bottom:38px;}
.fq-block[hidden]{display:none;}
.fq-cat{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:400;font-size:clamp(1.375rem,2.6vw,1.875rem);
  line-height:1;letter-spacing:-.01em;color:var(--fq-ink);margin:0 0 16px;padding-top:.08em;
}
.fq-cat::after{content:'';flex:1;height:1px;background:var(--fq-line);}

/* ---------- Accordéon ---------- */
.fq-item{
  background:#fff;border:1.4px solid var(--fq-line);border-radius:16px;
  margin-bottom:12px;overflow:hidden;
  transition:border-color .22s,box-shadow .28s,transform .22s cubic-bezier(.16,.84,.44,1);
}
.fq-item:hover{border-color:rgba(79,127,206,.42);box-shadow:0 16px 34px -24px rgba(20,24,31,.55);}
.fq-item[open]{border-color:rgba(79,127,206,.55);box-shadow:0 20px 44px -26px rgba(79,127,206,.7);}
.fq-item[hidden]{display:none;}

.fq-item summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:18px 20px;font-weight:600;font-size:1rem;line-height:1.4;color:var(--fq-ink);
  transition:color .18s;
}
.fq-item summary::-webkit-details-marker{display:none;}
.fq-item summary:hover{color:var(--fq-blue);}
.fq-item summary:focus-visible{outline:3px solid rgba(79,127,206,.35);outline-offset:-3px;border-radius:14px;}
.fq-q{flex:1;}

/* Signe + qui bascule en × à l'ouverture. */
.fq-sign{
  position:relative;flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:rgba(79,127,206,.10);transition:background .22s,transform .28s cubic-bezier(.16,.84,.44,1);
}
.fq-sign::before,.fq-sign::after{
  content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;
  background:var(--fq-blue);transform:translate(-50%,-50%);transition:transform .28s cubic-bezier(.16,.84,.44,1);
}
.fq-sign::after{transform:translate(-50%,-50%) rotate(90deg);}
.fq-item[open] .fq-sign{background:var(--fq-blue);transform:rotate(180deg);}
.fq-item[open] .fq-sign::before,.fq-item[open] .fq-sign::after{background:#fff;}
.fq-item[open] .fq-sign::after{transform:translate(-50%,-50%) rotate(0deg);}

/* Ouverture animée : la ligne passe de 0fr à 1fr, ce qui anime une hauteur
   « auto » sans avoir à deviner une max-height. */
.fq-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.16,.84,.44,1);}
.fq-item[open] .fq-wrap{grid-template-rows:1fr;}
.fq-answer{overflow:hidden;}
.fq-answer > div{padding:0 20px 20px 66px;color:#4A5364;font-size:0.9688rem;line-height:1.72;}
.fq-answer p{margin:0 0 10px;}
.fq-answer p:last-child{margin-bottom:0;}
.fq-answer ul,.fq-answer ol{margin:0 0 10px;padding-left:20px;}
.fq-answer a{text-decoration:underline;text-underline-offset:2px;}

/* Message quand la recherche ne donne rien. */
.fq-none{
  display:none;text-align:center;color:#4A5364;font-size:0.9688rem;
  background:#fff;border:1.4px dashed var(--fq-line);border-radius:16px;padding:30px 24px;
}
.fq-none.is-shown{display:block;}

/* =====================================================================
   APPEL À L'ACTION
   ===================================================================== */
.fq-cta{
  position:relative;overflow:hidden;text-align:center;
  background:var(--fq-soft);border:1.4px solid rgba(20,24,31,.07);border-radius:24px;
  padding:clamp(30px,4.4vw,46px) 26px;margin-top:8px;
}
.fq-cta h3{
  font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.125rem);
  line-height:1.02;letter-spacing:-.01em;margin:0 0 10px;color:var(--fq-ink);padding-top:.06em;
}
.fq-cta p{color:#4A5364;margin:0 0 22px;font-size:1rem;}

.fq-btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:700;font-size:0.9375rem;line-height:1;border-radius:999px;padding:15px 26px;
  border:1.6px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.16,.84,.44,1),background .2s,box-shadow .25s,border-color .2s,color .2s;
}
.fq-btn:hover{transform:translateY(-2px);}
.fq-btn-primary{color:#fff!important;background:var(--fq-blue);box-shadow:0 14px 32px -12px rgba(79,127,206,.62);}
.fq-btn-primary:hover{background:var(--fq-blue-d);box-shadow:0 18px 40px -12px rgba(79,127,206,.68);}
.fq-btn-ghost{color:var(--fq-ink)!important;background:rgba(255,255,255,.72);border-color:var(--fq-line);backdrop-filter:blur(6px);}
.fq-btn-ghost:hover{border-color:var(--fq-blue);color:var(--fq-blue)!important;}
.fq-btn .arw{transition:transform .2s;}
.fq-btn:hover .arw{transform:translateX(3px);}

/* =====================================================================
   PAGE CONTACT
   ===================================================================== */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,2.6vw,34px);align-items:start;}

/* ---------- Carte formulaire ---------- */
.ct-card{
  background:#fff;border:1.4px solid var(--fq-line);border-radius:24px;
  padding:clamp(24px,3vw,36px);box-shadow:0 30px 70px -50px rgba(20,24,31,.7);
}
.ct-card h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(1.375rem,2.6vw,1.875rem);
  line-height:1;letter-spacing:-.01em;margin:0 0 6px;color:var(--fq-ink);padding-top:.08em;
}
.ct-card-sub{color:#4A5364;font-size:0.9375rem;margin:0 0 22px;}

.ct-form{display:flex;flex-direction:column;gap:16px;}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ct-field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.ct-field > span{font-size:0.8125rem;font-weight:700;letter-spacing:.02em;color:#4A5364;}
.ct-field input,.ct-field textarea{
  width:100%;font:inherit;font-size:0.9688rem;color:var(--fq-ink);
  background:#FBFBFD;border:1.4px solid var(--fq-line);border-radius:14px;padding:13px 16px;
  transition:border-color .2s,box-shadow .25s,background .2s;
}
.ct-field textarea{resize:vertical;min-height:150px;line-height:1.6;}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#9AA2B2;}
.ct-field input:focus,.ct-field textarea:focus{
  outline:none;background:#fff;border-color:var(--fq-blue);
  box-shadow:0 0 0 4px rgba(79,127,206,.14);
}

/* Piège à robots : invisible à l'œil comme aux lecteurs d'écran, mais toujours
   soumis. `display:none` est évité, certains robots le détectent. */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:2px;}
.ct-form.is-busy{opacity:.7;pointer-events:none;}
.ct-status{margin:0;font-size:0.875rem;font-weight:600;line-height:1.45;}
.ct-status.is-ok{color:#137A45;}
.ct-status.is-ko{color:#C4321F;}
.ct-legal{margin:0;font-size:0.8125rem;color:#6B7385;line-height:1.55;}
.ct-legal a{text-decoration:underline;text-underline-offset:2px;}

/* ---------- Colonne coordonnées ---------- */
.ct-aside{display:flex;flex-direction:column;gap:12px;}
.ct-tile{
  display:flex;align-items:flex-start;gap:14px;
  background:#fff;border:1.4px solid var(--fq-line);border-radius:18px;padding:18px 20px;
  transition:border-color .22s,box-shadow .28s,transform .22s cubic-bezier(.16,.84,.44,1);
}
.ct-tile:hover{transform:translateY(-2px);border-color:rgba(79,127,206,.42);box-shadow:0 18px 38px -26px rgba(20,24,31,.6);}
.ct-ico{
  flex:0 0 40px;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(79,127,206,.10);color:var(--fq-blue);
}
.ct-ico svg{width:19px;height:19px;}
.ct-tile-body{min-width:0;}
.ct-label{display:block;font-size:0.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8A93A6;margin-bottom:3px;}
.ct-value{color:var(--fq-ink);font-size:0.9375rem;line-height:1.5;word-break:break-word;}
.ct-value a{font-weight:600;}

/* Encart « voir la FAQ », en dégradé doux pour trancher avec les tuiles. */
.ct-hint{
  background:var(--fq-soft);border:1.4px solid rgba(20,24,31,.07);border-radius:18px;padding:20px;
}
.ct-hint p{margin:0 0 14px;color:#4A5364;font-size:0.9375rem;line-height:1.6;}
.ct-hint .fq-btn{padding:12px 20px;font-size:0.875rem;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:900px){
  .ct-grid{grid-template-columns:1fr;}
  .ct-aside{order:2;}
  .ct-card{order:1;}
  .fq-hero-heart{opacity:.08;right:-160px;}
}
@media(max-width:620px){
  .fq .container{padding:0 18px;}
  .ct-row{grid-template-columns:1fr;}
  .fq-answer > div{padding-left:20px;}
  .ct-actions{flex-direction:column;align-items:stretch;}
  .ct-actions .fq-btn{justify-content:center;width:100%;}
  .fq-item summary{padding:16px;gap:12px;font-size:0.9688rem;}
}
@media(prefers-reduced-motion:reduce){
  .fq *{transition-duration:.001s!important;animation-duration:.001s!important;}
}