/*
 * Commentaire flottant — apparence « Bandeau » : titre sur un bandeau de couleur avec une bulle
 * de dialogue, corps blanc, champs cerclés de la couleur du bandeau. Le bouton d'envoi garde le
 * style des boutons du site.
 *
 * Variables : --cf-accent (bandeau, liserés), --cf-sur-accent (titre sur le bandeau), posées par
 * les réglages ; --cf-police-titre et --cf-graisse-titre, lues par le script sur les titres de
 * l'article ; --cf-top, distance depuis le haut, calculée par le script.
 *
 * Les sélecteurs commencent par #respond.cf-carte : les thèmes ciblent le formulaire par son
 * identifiant (#commentform input…), il faut au moins leur poids pour passer devant.
 */

#respond.cf-carte {
  box-sizing: border-box;
  max-width: 640px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d6e3ec;
  border: 1px solid color-mix(in srgb, var(--cf-accent, #2271b1) 18%, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--cf-accent, #2271b1) 12%, transparent);
  text-align: left;
}

#respond.cf-carte #reply-title {
  position: relative;
  margin: 0;
  padding: 16px 20px 16px 58px;
  border: 0;
  font-family: var(--cf-police-titre, inherit);
  font-size: 20px;
  font-weight: var(--cf-graisse-titre, 600);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  color: var(--cf-sur-accent, #fff);
  background: var(--cf-accent, #2271b1);
}

/* La bulle de dialogue, de la couleur du titre */
#respond.cf-carte #reply-title::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-12.2 7.5L3 21l2-5.6A8.4 8.4 0 1 1 21 11.5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-12.2 7.5L3 21l2-5.6A8.4 8.4 0 1 1 21 11.5z'/></svg>") center / contain no-repeat;
}

#respond.cf-carte #reply-title small,
#respond.cf-carte #cancel-comment-reply-link {
  display: block;
  margin: 2px 0 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: inherit;
}

#respond.cf-carte #commentform,
#respond.cf-carte .comment-form {
  margin: 0;
  padding: 16px 20px 20px;
}

#respond.cf-carte .comment-notes,
#respond.cf-carte .logged-in-as {
  margin: 0 0 14px;
  padding: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #6b7280;
}

#respond.cf-carte .required-field-message,
#respond.cf-carte .comment-form-url {
  display: none;
}

#respond.cf-carte #commentform p,
#respond.cf-carte .comment-form p {
  margin: 0 0 10px;
  padding: 0;
}

#respond.cf-carte label {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

#respond.cf-carte #commentform textarea,
#respond.cf-carte #commentform input[type=text],
#respond.cf-carte #commentform input[type=email],
#respond.cf-carte #commentform input[type=url] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  border: 1px solid color-mix(in srgb, var(--cf-accent, #2271b1) 25%, #d1d5db);
  border-radius: 4px;
  box-shadow: none;
}

#respond.cf-carte #commentform textarea {
  height: 112px;
  min-height: 0;
  resize: vertical;
}

#respond.cf-carte #commentform textarea:focus,
#respond.cf-carte #commentform input:focus {
  border-color: var(--cf-accent, #2271b1);
  outline: none;
}

#respond.cf-carte .comment-form-cookies-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
}

#respond.cf-carte .comment-form-cookies-consent input {
  flex: none;
  width: auto;
  margin: 3px 0 0;
}

#respond.cf-carte .comment-form-cookies-consent label {
  font-size: 13px;
  font-weight: 400;
}

#respond.cf-carte .form-submit {
  margin: 14px 0 0 !important;
  padding: 0;
  text-align: center;
}

#respond.cf-carte .form-submit [type=submit] {
  float: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

/* Carte étroite (colonne latérale de Divi, 246 px) : le bouton du site, souvent en grands
   caractères, déborderait. On resserre les marges et le texte, sans toucher au reste du style. */
#respond.cf-carte {
  container-type: inline-size;
}

@container (max-width: 280px) {
  #respond.cf-carte #reply-title {
    padding: 14px 16px 14px 50px;
    font-size: 18px;
  }
  #respond.cf-carte #reply-title::before {
    left: 16px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }
  #respond.cf-carte #commentform,
  #respond.cf-carte .comment-form {
    padding: 14px 16px 16px;
  }
  #respond.cf-carte .form-submit [type=submit] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 15px !important;
    white-space: normal;
  }
}

/* Le rail, quand la place le permet */

.cf-conteneur {
  position: relative;
}

.cf-rail {
  position: absolute;
  z-index: 5;
}

.cf-rail #respond.cf-carte {
  position: sticky;
  top: var(--cf-top, 24px);
  max-width: none;
}