/* ==========================================================================
   WEBIPHI — Pages contact et audit gratuit                  wbp-contact.css
   --------------------------------------------------------------------------
   Chargée par contact.html et audit-gratuit.html (méta « css »). Les deux
   pages sont séparées depuis le 17/10/2026 mais partagent la carte de
   formulaire, les pastilles et la mise en page du héros.
   ========================================================================== */

/* Le formulaire est plus long que la colonne de texte : on aligne en haut,
   sinon le texte flotte au milieu d'un grand vide. */
.wbp-ct-grid{align-items:start}
@media (min-width:981px){.wbp-ct-grid > .wbp-phero__copy{padding-top:24px}}

/* --------------------------------------------------------------------------
   Contact : les trois façons de nous joindre, empilées
   -------------------------------------------------------------------------- */
.wbp-ct-ways{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
.wbp-ct-ways__i{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;
  background:#fff;border:1px solid var(--wbp-line);border-radius:var(--wbp-radius);
  color:var(--wbp-ink);
  transition:translate .25s var(--wbp-ease);
}
/* Bloc, pas flex : les trois lignes restent du texte (piège n°2). */
.wbp-ct-ways__t{display:block;flex:1;min-width:0}
.wbp-ct-ways__t small{
  display:block;margin-bottom:3px;
  font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wbp-brand-mid);
}
.wbp-ct-ways__t b{display:block;font-size:1.125rem;font-weight:600;overflow-wrap:anywhere}
.wbp-ct-ways__t span{display:block;margin-top:3px;font-size:.9375rem;line-height:1.5;color:var(--wbp-muted)}
/* La flèche, seulement sur les deux lignes cliquables. */
.wbp-ct-ways__i i{
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--wbp-brand-soft) no-repeat center/16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A31432' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .25s var(--wbp-ease);
}
@media (hover:hover) and (pointer:fine){
  a.wbp-ct-ways__i:hover{translate:0 -3px;border-color:var(--wbp-brand-line)}
  a.wbp-ct-ways__i:hover .wbp-ic{background:var(--wbp-brand)}
  a.wbp-ct-ways__i:hover .wbp-ic svg{stroke:var(--wbp-cream)}
  a.wbp-ct-ways__i:hover i{transform:translateX(4px)}
}

/* Audit : le renvoi discret vers la page contact. */
.wbp-ct-alt{margin-top:28px;font-size:.9375rem;line-height:1.6;color:var(--wbp-muted)}
.wbp-ct-alt a{color:var(--wbp-brand-mid);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   Contact : le renvoi vers l'audit, en aplat bordeaux
   -------------------------------------------------------------------------- */
.wbp-ct-toaudit{
  display:grid;gap:24px;align-items:center;
  padding:clamp(28px,4vw,48px);border-radius:var(--wbp-radius-lg);
  background:var(--wbp-brand);color:var(--wbp-cream);
}
@media (min-width:981px){.wbp-ct-toaudit{grid-template-columns:1fr auto;gap:48px}}
.wbp-ct-toaudit h2{margin:14px 0 10px;color:#fff}
.wbp-ct-toaudit p{margin:0;max-width:56ch;color:rgba(239,228,214,.85)}
.wbp-ct-toaudit :focus-visible{outline-color:var(--wbp-cream)}

/* --------------------------------------------------------------------------
   Ce qui se passe ensuite
   -------------------------------------------------------------------------- */
.wbp-ct-next{margin-top:36px}
.wbp-ct-next__h{
  margin:0 0 16px;
  font-size:.75rem;font-weight:500;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wbp-muted);
}
.wbp-ct-next ol{list-style:none;margin:0;padding:0;counter-reset:wbp-ct}
.wbp-ct-next li{
  position:relative;counter-increment:wbp-ct;
  padding:0 0 18px 46px;
  font-size:1rem;line-height:1.55;color:var(--wbp-ink-2);
}
.wbp-ct-next li b{color:var(--wbp-ink);font-weight:600}
/* La pastille numérotée, et le fil qui relie les étapes. */
.wbp-ct-next li::before{
  content:counter(wbp-ct);
  position:absolute;left:0;top:-2px;
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--wbp-brand);color:var(--wbp-cream);
  font-size:.875rem;font-weight:600;
}
.wbp-ct-next li:not(:last-child)::after{
  content:'';position:absolute;left:14.5px;top:32px;bottom:2px;
  width:1px;background:var(--wbp-brand-line);
}
.wbp-ct-next li:last-child{padding-bottom:0}

/* --------------------------------------------------------------------------
   La carte du formulaire
   -------------------------------------------------------------------------- */
.wbp-ct-card{
  background:#fff;border:1px solid var(--wbp-line);border-radius:var(--wbp-radius-lg);
  padding:clamp(24px,3vw,36px);box-shadow:var(--wbp-shadow-m);
}
.wbp-ct-card h2{margin:0 0 6px}
.wbp-ct-card__note{font-size:.9375rem;color:var(--wbp-muted);margin:0 0 24px}
.wbp-ct-card__note span{color:var(--wbp-brand-mid)}

.wbp-ct-badges{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wbp-ct-badges li{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:var(--wbp-brand-soft);color:var(--wbp-brand-mid);
  font-size:.8125rem;font-weight:600;line-height:1.2;
}
.wbp-ct-badges li::before{
  content:'';width:10px;height:6px;flex:none;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(-45deg);
}

.wbp-ct-gap{margin-top:18px}

/* --------------------------------------------------------------------------
   Le sujet en pastilles
   De vrais boutons radio : le cercle natif est rendu transparent et posé sur
   toute la pastille, il reste donc cliquable, focusable et annoncé.
   -------------------------------------------------------------------------- */
.wbp-chips{display:block;margin:0;padding:0;border:0;min-width:0}
.wbp-chips legend{
  display:block;margin-bottom:10px;padding:0;
  font-size:.875rem;font-weight:600;color:var(--wbp-ink);
}
.wbp-chips legend span{color:var(--wbp-brand-mid)}
.wbp-chips__list{display:flex;flex-wrap:wrap;gap:8px}
.wbp-chips__list label{position:relative;display:block}
.wbp-field .wbp-chips__list input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;opacity:0;cursor:pointer;
}
/* Préfixé .wbp-field : sinon « .wbp-field label span » (l'astérisque
   bordeaux des libellés) l'emporte et colore toutes les pastilles. */
.wbp-field .wbp-chips__list span{
  display:block;padding:9px 15px;border-radius:999px;
  background:#fff;border:1.5px solid var(--wbp-line);
  font-size:.9375rem;font-weight:500;line-height:1.25;color:var(--wbp-ink-2);
  transition:background .18s, border-color .18s, color .18s;
}
.wbp-chips__list input:hover + span{border-color:var(--wbp-brand-mid)}
.wbp-chips__list input:checked + span{
  background:var(--wbp-brand);border-color:var(--wbp-brand);color:#fff;
}
.wbp-chips__list input:focus-visible + span{outline:3px solid var(--wbp-brand-mid);outline-offset:2px}
.wbp-chips.is-invalid .wbp-chips__list span{border-color:#B3122E}
.wbp-chips .wbp-field__err{margin-top:8px}

/* --------------------------------------------------------------------------
   Ce qu'on regarde : 3 × 2, une liste de contrôle, pas des cartes
   -------------------------------------------------------------------------- */
.wbp-ct-look{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(28px,4vw,56px)}
@media (min-width:700px){.wbp-ct-look{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.wbp-ct-look{grid-template-columns:repeat(3,1fr)}}
.wbp-ct-look li{padding:28px 0;border-top:1px solid var(--wbp-line)}
.wbp-ct-look .wbp-ic{margin-bottom:16px}
.wbp-ct-look h3{margin:0 0 8px;font-size:1.1875rem;line-height:1.3}
.wbp-ct-look p{margin:0;color:var(--wbp-ink-2);line-height:1.6}

/* --------------------------------------------------------------------------
   Bandeau final
   -------------------------------------------------------------------------- */
.wbp-ct-call{background:var(--wbp-brand);color:var(--wbp-cream);
  padding-block:clamp(48px,6vw,80px)}
.wbp-ct-call__in{display:grid;gap:28px;align-items:center}
@media (min-width:981px){.wbp-ct-call__in{grid-template-columns:1fr auto;gap:56px}}
.wbp-ct-call h2{margin:0 0 10px;color:#fff}
.wbp-ct-call p{margin:0;max-width:52ch;color:rgba(239,228,214,.85)}
.wbp-ct-call__btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.wbp-ct-call__btns svg{width:20px;height:20px;flex:none}
.wbp-ct-call__mail{color:var(--wbp-cream);font-weight:600;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.wbp-ct-call__mail:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  .wbp-ct-ways__i,.wbp-ct-ways__i i{transition:none}
  a.wbp-ct-ways__i:hover{translate:none}
  a.wbp-ct-ways__i:hover i{transform:none}
}