/* Page contact, autonome : jetons redeclares. Deux colonnes : les
   informations dans une carte sombre a gauche, le formulaire adaptatif
   dans une carte blanche a droite. Les groupes de champs par cible sont
   montres par :has, sans script ; le script ne fait que desactiver les
   groupes masques. */

.mv-ct {
  --mv-or: #D9B24B;
  --mv-teal: #259C99;
  --mv-teal-texte: #1a7573;
  --mv-teal-vif: #58d3cf;
  --mv-encre: #10151c;
  --mv-rayon: 5px;
  --mv-titre: Lato, ui-sans-serif, system-ui, sans-serif;
  --mv-corps: Nunito, ui-sans-serif, system-ui, sans-serif;

  font-family: var(--mv-corps);
  color: #333333;
  background: #f4f7f7;
}
.mv-ct * { box-sizing: border-box; }
.mv-ct :where(p, ul, h1, address, fieldset) { margin: 0; }

.mv-ct__enveloppe {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}

.mv-ct .mv-ct__surtitre {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mv-teal-vif);
}
.mv-ct .mv-ct__surtitre::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}
.mv-ct .mv-ct__surtitre--clair { color: var(--mv-teal-vif); }

/* ---- Le bandeau ---- */

.mv-ct__bandeau {
  position: relative;
  background: #10151c;
  overflow: hidden;
}
.mv-ct__bandeau::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 78% at 8% 0%, rgba(37, 156, 153, 0.16) 0%, rgba(16, 21, 28, 0) 60%),
    radial-gradient(44% 66% at 94% 100%, rgba(217, 178, 75, 0.1) 0%, rgba(16, 21, 28, 0) 58%);
}
.mv-ct__bandeau .mv-ct__enveloppe {
  position: relative;
  padding-block: 88px 128px;
}
.mv-ct__titre {
  font-family: var(--mv-titre);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-block-start: 18px;
}
.mv-ct__chapo {
  margin-block-start: 18px;
  font-size: 17.5px;
  line-height: 27px;
  color: #c2cad4;
  max-width: 44em;
}

/* ---- Les deux colonnes ---- */

.mv-ct__corps {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 32px;
  /* PAS de align-items:start : la colonne des infos doit s'etirer sur
     toute la hauteur de la rangee, sinon la carte sticky n'a aucune
     course et reste immobile. */
  margin-block-start: -64px;
  position: relative;
  padding-block-end: 96px;
}

.mv-ct__carte-infos {
  position: sticky;
  top: 104px;
  padding: 30px 28px;
  border-radius: var(--mv-rayon);
  background: #131920;
  background-image:
    radial-gradient(60% 60% at 12% 0%, rgba(37, 156, 153, 0.16) 0%, rgba(19, 25, 32, 0) 60%),
    radial-gradient(50% 50% at 95% 100%, rgba(217, 178, 75, 0.1) 0%, rgba(19, 25, 32, 0) 58%);
  box-shadow: 0 24px 48px -24px rgba(9, 13, 19, 0.5);
}
.mv-ct__adresse {
  margin-block-start: 20px;
  font-style: normal;
  font-size: 16.5px;
  line-height: 26px;
  color: #ffffff;
  font-weight: 700;
  font-family: var(--mv-titre);
}
.mv-ct__note {
  margin-block-start: 12px;
  font-size: 14.5px;
  line-height: 23px;
  color: #aeb7c2;
}
.mv-ct__coordonnees {
  list-style: none;
  padding: 0;
  margin-block-start: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mv-ct__coordonnees a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-block: 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: #eef2f6;
  text-decoration: none;
  transition: color 240ms ease;
  overflow-wrap: anywhere;
}
.mv-ct__coordonnees svg { flex: none; width: 19px; height: 19px; color: var(--mv-teal-vif); transition: color 240ms ease; }
.mv-ct__coordonnees a:hover { color: var(--mv-or); }
.mv-ct__coordonnees a:hover svg { color: var(--mv-or); }
.mv-ct__coordonnees a:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }

.mv-ct__rdv {
  margin-block-start: 22px;
  padding-block-start: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mv-ct__rdv-texte { font-size: 14.5px; color: #aeb7c2; }
.mv-ct .mv-ct__rdv-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 6px;
  min-height: 44px;
  padding-block: 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--mv-teal-vif);
  text-decoration: none;
  transition: color 240ms ease;
}
.mv-ct .mv-ct__rdv-lien svg { width: 16px; height: 16px; transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.mv-ct .mv-ct__rdv-lien:hover { color: var(--mv-or); }
.mv-ct .mv-ct__rdv-lien:hover svg { transform: translateX(4px); }
.mv-ct .mv-ct__rdv-lien:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }

/* ---- Le formulaire ---- */

.mv-ct__zone-form { scroll-margin-top: 104px; }
.mv-ct__form {
  padding: 34px 32px 30px;
  border-radius: var(--mv-rayon);
  background: #ffffff;
  box-shadow: 0 24px 48px -28px rgba(16, 21, 28, 0.3);
}
.mv-ct__message {
  margin-block-end: 18px;
  padding: 12px 16px;
  border-radius: var(--mv-rayon);
  font-size: 15px;
  line-height: 23px;
}
.mv-ct__message--ok { background: rgba(37, 156, 153, 0.1); border: 1px solid rgba(37, 156, 153, 0.4); color: #145f5d; }
.mv-ct__message--erreur { background: rgba(200, 74, 40, 0.08); border: 1px solid rgba(200, 74, 40, 0.4); color: #99381c; }

.mv-ct__miel { position: absolute; left: -9999px; top: auto; }

.mv-ct__bloc { border: 0; padding: 0; margin: 0 0 24px; }
.mv-ct__legende {
  font-family: var(--mv-titre);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mv-encre);
  margin-block-end: 14px;
  padding: 0;
}

.mv-ct__cibles { display: flex; flex-wrap: wrap; gap: 10px; }
.mv-ct__cible { position: relative; cursor: pointer; }
.mv-ct__cible input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  cursor: pointer;
}
.mv-ct__cible span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #d8dee4;
  border-radius: var(--mv-rayon);
  font-size: 14.5px;
  font-weight: 700;
  color: #545b65;
  transition: border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}
.mv-ct__cible:hover span { border-color: var(--mv-or); color: var(--mv-encre); }
.mv-ct__cible input:checked + span { background: var(--mv-encre); border-color: var(--mv-encre); color: #ffffff; }
.mv-ct__cible input:focus-visible + span { outline: 2px solid var(--mv-teal); outline-offset: 2px; }

.mv-ct__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin-block-end: 18px;
}
.mv-ct__champ { display: flex; flex-direction: column; gap: 7px; }
.mv-ct__champ--civilite { max-width: 140px; }
.mv-ct__champ--message { margin-block-end: 22px; }
.mv-ct__champ label {
  font-size: 14px;
  font-weight: 700;
  color: var(--mv-encre);
}
.mv-ct__champ label span { color: var(--mv-teal-texte); }
.mv-ct__champ input,
.mv-ct__champ select,
.mv-ct__champ textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #d8dee4;
  border-radius: var(--mv-rayon);
  background: #ffffff;
  font-family: var(--mv-corps);
  font-size: 15.5px;
  color: var(--mv-encre);
  transition: border-color 240ms ease, box-shadow 240ms ease;
  width: 100%;
}
.mv-ct__champ textarea { min-height: 130px; resize: vertical; }
.mv-ct__champ input:focus,
.mv-ct__champ select:focus,
.mv-ct__champ textarea:focus {
  outline: none;
  border-color: var(--mv-teal);
  box-shadow: 0 0 0 3px rgba(37, 156, 153, 0.16);
}

/* Les groupes par cible : caches par defaut, montres par :has. Sans :has
   (tres vieux navigateur), tous restent visibles : degradation lisible. */
.mv-ct__form:has(input[name="mv_ct_cible"]:checked) .mv-ct__groupe { display: none; }
.mv-ct__form:has(#mv-cible-solopreneur:checked) .mv-ct__groupe--solopreneur,
.mv-ct__form:has(#mv-cible-pme-pmi:checked) .mv-ct__groupe--pme-pmi,
.mv-ct__form:has(#mv-cible-grand-groupe:checked) .mv-ct__groupe--grand-groupe,
.mv-ct__form:has(#mv-cible-institutionnel:checked) .mv-ct__groupe--institutionnel,
.mv-ct__form:has(#mv-cible-autre:checked) .mv-ct__groupe--autre { display: grid; }

.mv-ct__sujets { display: flex; flex-wrap: wrap; gap: 10px; }
.mv-ct__sujet { position: relative; cursor: pointer; }
.mv-ct__sujet input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.mv-ct__sujet span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #d8dee4;
  border-radius: var(--mv-rayon);
  font-size: 14px;
  font-weight: 700;
  color: #545b65;
  transition: border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}
.mv-ct__sujet span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8dee4;
  transition: background-color 240ms ease;
}
.mv-ct__sujet:hover span { border-color: var(--mv-or); color: var(--mv-encre); }
.mv-ct__sujet input:checked + span {
  border-color: var(--mv-teal);
  background: rgba(37, 156, 153, 0.08);
  color: var(--mv-encre);
}
.mv-ct__sujet input:checked + span::before { background: var(--mv-teal); }
.mv-ct__sujet input:focus-visible + span { outline: 2px solid var(--mv-teal); outline-offset: 2px; }

.mv-ct__consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-block-start: 4px;
  padding-block: 6px;
  font-size: 13.5px;
  line-height: 21px;
  color: #545b65;
  cursor: pointer;
}
.mv-ct__consentement input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--mv-teal);
  cursor: pointer;
}
.mv-ct__consentement a { color: var(--mv-teal-texte); text-decoration: underline; text-underline-offset: 3px; }
.mv-ct__consentement a:hover { color: var(--mv-or); }
.mv-ct__consentement span span { color: var(--mv-teal-texte); }

.mv-ct .mv-ct__envoyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 30px;
  margin-block-start: 22px;
  border: 1px solid var(--mv-or);
  border-radius: var(--mv-rayon);
  background: var(--mv-or);
  font-family: var(--mv-corps);
  font-size: 16px;
  font-weight: 700;
  color: #10151c;
  cursor: pointer;
  transition: background-color 240ms ease, border-color 240ms ease, transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-ct .mv-ct__envoyer:hover { background: #e3c060; border-color: #e3c060; transform: translateY(-2px); }
.mv-ct .mv-ct__envoyer:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }
.mv-ct__mention { margin-block-start: 12px; font-size: 12.5px; color: #98a2b3; }

/* ---- Reactivite ---- */

@media (prefers-reduced-motion: reduce) {
  .mv-ct .mv-ct__envoyer, .mv-ct__cible span, .mv-ct__sujet span,
  .mv-ct__coordonnees a, .mv-ct .mv-ct__rdv-lien svg { transition: none; }
  .mv-ct .mv-ct__envoyer:hover { transform: none; }
  .mv-ct .mv-ct__rdv-lien:hover svg { transform: none; }
}

@media (max-width: 1024.98px) {
  .mv-ct__corps { grid-template-columns: minmax(0, 1fr); }
  .mv-ct__infos { order: 2; }
  .mv-ct__carte-infos { position: static; }
}
@media (max-width: 640px) {
  .mv-ct__bandeau .mv-ct__enveloppe { padding-block: 64px 112px; }
  .mv-ct__form { padding: 24px 20px 24px; }
  .mv-ct__grille { grid-template-columns: minmax(0, 1fr); }
  .mv-ct__champ--civilite { max-width: none; }
  .mv-ct .mv-ct__envoyer { width: 100%; }
}

/* ---- Filigrane de marque ---- */

/* L entete de la page de contact.

   ⛔ Le motif est borne par `top` et `bottom`, jamais par une hauteur en
   pourcentage : sur un pseudo-element, une hauteur en % ne se resout pas
   toujours, alors que les decalages, eux, se resolvent toujours. Le trace
   reste ainsi dans sa section quelle que soit sa hauteur, sans qu on ait a
   toucher a l overflow des sections existantes.

   ⛔ Toujours ::after : ::before porte deja les lueurs de ces sections. */
.mv-ct .mv-ct__bandeau::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6%;
  bottom: 6%;
  right: 4%;
  width: min(26%, 300px);
  background: var(--mv-motif) no-repeat right center / contain;
  opacity: 0.26;
  pointer-events: none;
}

@media (max-width: 900px) {
  .mv-ct .mv-ct__bandeau::after {
    right: -8%;
    width: 46%;
    opacity: 0.14;
  }
}