.image-border {
  border: 3px solid #000;
  padding: 4px;
  background: #fff;
  display: inline-block;  /* keeps border tight to image */
}
/* ==========================================================
   Habillage Afroranking pour Jetpack Forms
   À coller dans Apparence → Personnaliser → CSS supplémentaire(s)
   (ou Apparence → Éditeur → Styles → ⋮ → CSS supplémentaire(s)
   si votre thème utilise l'éditeur de site plutôt que le
   personnalisateur classique)

   Aucune classe CSS à ajouter manuellement : Jetpack ajoute
   automatiquement la classe .contact-form à chaque formulaire,
   c'est elle que ce fichier cible.
   ========================================================== */

:root{
  --ar-black:#0B0B0C;
  --ar-gold:#F5C518;
  --ar-gold-deep:#C9970A;
  --ar-white:#FFFFFF;
  --ar-off:#FAF8F1;
  --ar-ink:#161513;
  --ar-gray:#6E6E6E;
  --ar-line:rgba(11,11,12,.14);
}

.contact-form,
.afroranking-contact-jetpack{
  max-width: 820px;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
  background: var(--ar-white);
  border: 1px solid var(--ar-line);
  padding: 34px 30px;
}

/* Field labels — Jetpack wraps each field in a paragraph/label pair */
.contact-form label,
.afroranking-contact-jetpack label{
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ar-black);
  margin-bottom: 6px;
}

/* Required marker Jetpack adds automatically ("(required)") */
.contact-form .grunion-field-label small,
.contact-form label small,
.afroranking-contact-jetpack label small{
  color: var(--ar-gold-deep);
  font-weight: 400;
  font-size: 11px;
}

/* Text-like inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea,
.afroranking-contact-jetpack input[type="text"],
.afroranking-contact-jetpack input[type="email"],
.afroranking-contact-jetpack input[type="tel"],
.afroranking-contact-jetpack input[type="url"],
.afroranking-contact-jetpack input[type="date"],
.afroranking-contact-jetpack select,
.afroranking-contact-jetpack textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ar-line);
  background: var(--ar-off);
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  color: var(--ar-ink);
  border-radius: 0;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.afroranking-contact-jetpack input:focus,
.afroranking-contact-jetpack select:focus,
.afroranking-contact-jetpack textarea:focus{
  outline: none;
  border-color: var(--ar-gold-deep);
  background: #fff;
}
.contact-form textarea,
.afroranking-contact-jetpack textarea{ min-height: 110px; resize: vertical; }

/* Radio / checkbox rows */
.contact-form input[type="radio"],
.contact-form input[type="checkbox"],
.afroranking-contact-jetpack input[type="radio"],
.afroranking-contact-jetpack input[type="checkbox"]{
  accent-color: var(--ar-gold-deep);
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.contact-form ul,
.afroranking-contact-jetpack ul{ list-style:none; padding:0; margin:0 0 18px; }
.contact-form ul li,
.afroranking-contact-jetpack ul li{ margin-bottom: 8px; font-size: 14px; }

/* Submit button — Jetpack typically renders a <button> or <input type=submit> */
.contact-form button[type="submit"],
.contact-form input[type="submit"],
.afroranking-contact-jetpack button[type="submit"],
.afroranking-contact-jetpack input[type="submit"]{
  background: var(--ar-gold) !important;
  color: var(--ar-black) !important;
  border: none !important;
  padding: 15px 30px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer;
  border-radius: 0;
  transition: background .2s, transform .2s;
}
.contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover,
.afroranking-contact-jetpack button[type="submit"]:hover,
.afroranking-contact-jetpack input[type="submit"]:hover{
  background: #fff !important;
  transform: translateY(-2px);
}

/* Error / validation text Jetpack shows inline */
.contact-form .form-error,
.contact-form .error,
.afroranking-contact-jetpack .form-error,
.afroranking-contact-jetpack .error{
  color: #E0561C;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* Success message after submission */
.contact-form .contact-form-submission-succeeded,
.contact-form .grunion-field-wrap.form-success,
.afroranking-contact-jetpack .contact-form-submission-succeeded,
.afroranking-contact-jetpack .grunion-field-wrap.form-success{
  background: var(--ar-black);
  color: #fff;
  padding: 22px;
  text-align: center;
}


/* ==========================================================
   Habillage Afroranking pour Jetpack Forms
   À coller dans Apparence → Personnaliser → CSS supplémentaire(s)
   (ou Apparence → Éditeur → Styles → ⋮ → CSS supplémentaire(s)
   si votre thème utilise l'éditeur de site plutôt que le
   personnalisateur classique)

   Aucune classe CSS à ajouter manuellement : Jetpack ajoute
   automatiquement la classe .contact-form à chaque formulaire,
   c'est elle que ce fichier cible.
   ========================================================== */

:root{
  --ar-black:#0B0B0C;
  --ar-gold:#F5C518;
  --ar-gold-deep:#C9970A;
  --ar-white:#FFFFFF;
  --ar-off:#FAF8F1;
  --ar-ink:#161513;
  --ar-gray:#6E6E6E;
  --ar-line:rgba(11,11,12,.14);
}

.contact-form,
.afroranking-contact-jetpack{
  max-width: 820px;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
  background: var(--ar-white);
  border: 1px solid var(--ar-line);
  padding: 34px 30px;
}

/* Field labels — Jetpack wraps each field in a paragraph/label pair */
.contact-form label,
.afroranking-contact-jetpack label{
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ar-black);
  margin-bottom: 6px;
}

/* Required marker Jetpack adds automatically ("(required)") */
.contact-form .grunion-field-label small,
.contact-form label small,
.afroranking-contact-jetpack label small{
  color: var(--ar-gold-deep);
  font-weight: 400;
  font-size: 11px;
}

/* Text-like inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea,
.afroranking-contact-jetpack input[type="text"],
.afroranking-contact-jetpack input[type="email"],
.afroranking-contact-jetpack input[type="tel"],
.afroranking-contact-jetpack input[type="url"],
.afroranking-contact-jetpack input[type="date"],
.afroranking-contact-jetpack select,
.afroranking-contact-jetpack textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ar-line);
  background: var(--ar-off);
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  color: var(--ar-ink);
  border-radius: 0;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.afroranking-contact-jetpack input:focus,
.afroranking-contact-jetpack select:focus,
.afroranking-contact-jetpack textarea:focus{
  outline: none;
  border-color: var(--ar-gold-deep);
  background: #fff;
}
.contact-form textarea,
.afroranking-contact-jetpack textarea{ min-height: 110px; resize: vertical; }

/* Radio / checkbox rows */
.contact-form input[type="radio"],
.contact-form input[type="checkbox"],
.afroranking-contact-jetpack input[type="radio"],
.afroranking-contact-jetpack input[type="checkbox"]{
  accent-color: var(--ar-gold-deep);
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.contact-form ul,
.afroranking-contact-jetpack ul{ list-style:none; padding:0; margin:0 0 18px; }
.contact-form ul li,
.afroranking-contact-jetpack ul li{ margin-bottom: 8px; font-size: 14px; }

/* Submit button — Jetpack typically renders a <button> or <input type=submit> */
.contact-form button[type="submit"],
.contact-form input[type="submit"],
.afroranking-contact-jetpack button[type="submit"],
.afroranking-contact-jetpack input[type="submit"]{
  background: var(--ar-gold) !important;
  color: var(--ar-black) !important;
  border: none !important;
  padding: 15px 30px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer;
  border-radius: 0;
  transition: background .2s, transform .2s;
}
.contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover,
.afroranking-contact-jetpack button[type="submit"]:hover,
.afroranking-contact-jetpack input[type="submit"]:hover{
  background: #fff !important;
  transform: translateY(-2px);
}

/* Error / validation text Jetpack shows inline */
.contact-form .form-error,
.contact-form .error,
.afroranking-contact-jetpack .form-error,
.afroranking-contact-jetpack .error{
  color: #E0561C;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* Success message after submission */
.contact-form .contact-form-submission-succeeded,
.contact-form .grunion-field-wrap.form-success,
.afroranking-contact-jetpack .contact-form-submission-succeeded,
.afroranking-contact-jetpack .grunion-field-wrap.form-success{
  background: var(--ar-black);
  color: #fff;
  padding: 22px;
  text-align: center;
}