/*
 * MDE Classic — formulaires
 * Étape 1 : formulaire d'inscription particulier
 * Couche graphique uniquement.
 * Aucun template, JS ou comportement natif PrestaShop n'est modifié.
 */

body:is(#registration, #authentication, #password, #contact) {
  --mde-blue: #1B537E;
  --mde-blue-dark: #123D60;
  --mde-yellow: #FFD25F;
  --mde-cream: #FFFEF1;
  --mde-pale-blue: #E5EFEF;
  --mde-champagne: #FFEBB9;
  --mde-ink: #2F3D49;
  --mde-muted: #667684;
  --mde-radius: 12px;
}

body:is(#registration, #authentication) .register-form {
  max-width: 760px;
  margin: 0 auto 2rem;
  padding: 1.5rem 1.6rem 1.65rem;
  border: 3px solid var(--mde-yellow);
  border-radius: var(--mde-radius);
  background: var(--mde-cream);
  box-shadow: 0 8px 22px rgba(47, 61, 73, .06);
}

body:is(#registration, #authentication) #main .page-header h1,
body:is(#registration, #authentication) #main h1 {
  color: var(--mde-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-transform: none;
}

body:is(#registration, #authentication) .register-form > p {
  margin-bottom: 1.35rem;
  color: var(--mde-muted);
  font-size: .98rem;
}

body:is(#registration, #authentication) .register-form > p a {
  color: var(--mde-blue);
  font-weight: 700;
}

body:is(#registration, #authentication) .register-form > p a:hover {
  color: var(--mde-blue-dark);
  text-decoration: underline;
}

body:is(#registration, #authentication) .register-form .form-group {
  margin-bottom: 1rem;
}

body:is(#registration, #authentication) .register-form .form-control-label {
  color: var(--mde-blue-dark);
  font-weight: 700;
}

body:is(#registration, #authentication) .register-form .form-control {
  min-height: 42px;
  border: 1px solid rgba(27, 83, 126, .34);
  border-radius: 7px;
  background: #fff;
  color: var(--mde-ink);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body:is(#registration, #authentication) .register-form .form-control:hover {
  border-color: rgba(27, 83, 126, .55);
}

body:is(#registration, #authentication) .register-form .form-control:focus {
  border-color: var(--mde-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27, 83, 126, .10);
  outline: none;
}

body:is(#registration, #authentication) .register-form .form-control::placeholder {
  color: #8A969F;
  opacity: 1;
}

body:is(#registration, #authentication) .register-form .form-control-comment,
body:is(#registration, #authentication) .register-form .form-text,
body:is(#registration, #authentication) .register-form small {
  color: var(--mde-muted);
  font-size: .86rem;
  line-height: 1.35;
}

body:is(#registration, #authentication) .register-form input[type="radio"],
body:is(#registration, #authentication) .register-form input[type="checkbox"] {
  accent-color: var(--mde-blue);
}

body:is(#registration, #authentication) .register-form .custom-radio,
body:is(#registration, #authentication) .register-form .custom-checkbox {
  color: var(--mde-ink);
}

body:is(#registration, #authentication) .register-form .custom-checkbox label,
body:is(#registration, #authentication) .register-form .custom-radio label {
  color: var(--mde-ink);
  line-height: 1.35;
}

body:is(#registration, #authentication) .register-form a {
  color: var(--mde-blue);
}

body:is(#registration, #authentication) .register-form a:hover {
  color: var(--mde-blue-dark);
}

body:is(#registration, #authentication) .register-form .input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body:is(#registration, #authentication) .register-form .input-group .input-group-btn .btn,
body:is(#registration, #authentication) .register-form .input-group .btn {
  min-height: 42px;
  border: 1px solid var(--mde-blue);
  border-radius: 0 7px 7px 0;
  background: var(--mde-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

body:is(#registration, #authentication) .register-form .input-group .input-group-btn .btn:hover,
body:is(#registration, #authentication) .register-form .input-group .btn:hover {
  border-color: var(--mde-blue-dark);
  background: var(--mde-blue-dark);
}

body:is(#registration, #authentication) .register-form .password-strength-feedback {
  color: var(--mde-muted);
}

body:is(#registration, #authentication) .register-form .form-footer {
  margin-top: 1.4rem;
  padding-top: 1rem;
}

body:is(#registration, #authentication) .register-form .form-footer .btn-primary,
body:is(#registration, #authentication) .register-form button[type="submit"].btn-primary {
  min-height: 44px;
  padding: .72rem 1.35rem;
  border: 2px solid var(--mde-blue);
  border-radius: 8px;
  background: var(--mde-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}

body:is(#registration, #authentication) .register-form .form-footer .btn-primary:hover,
body:is(#registration, #authentication) .register-form button[type="submit"].btn-primary:hover {
  border-color: var(--mde-blue-dark);
  background: var(--mde-blue-dark);
}

body:is(#registration, #authentication) .register-form .form-footer .btn-primary:focus,
body:is(#registration, #authentication) .register-form button[type="submit"].btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(27, 83, 126, .14);
  outline: none;
}

/* Newsletter native PrestaShop masquée : la MDE utilise son propre système Brevo. */
@supports selector(.form-group:has(input[name="newsletter"])) {
  body:is(#registration, #authentication) .register-form .form-group:has(input[name="newsletter"]) {
    display: none;
  }
}

@media (max-width: 767px) {
  body:is(#registration, #authentication) .register-form {
    padding: 1.1rem 1rem 1.25rem;
  }

  body:is(#registration, #authentication) .register-form .form-control-label {
    margin-bottom: .35rem;
  }

  body:is(#registration, #authentication) .register-form .form-footer .btn-primary,
  body:is(#registration, #authentication) .register-form button[type="submit"].btn-primary {
    width: 100%;
  }
}

/* =========================================================
   Cases à cocher / consentements
   On élargit cette zone sans toucher aux champs de saisie.
   ========================================================= */

/* Les lignes checkbox ont un libellé gauche vide dans Classic.
   On le masque et on conserve l'alignement au niveau des champs,
   tout en donnant davantage de largeur au texte. */
@supports selector(.form-group:has(.custom-checkbox)) {
  body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) > .form-control-label {
    display: none;
  }

  body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) > .col-md-6 {
    flex: 0 0 75%;
    max-width: 75%;
    margin-left: 25%;
  }
}

body:is(#registration, #authentication) .register-form .custom-checkbox {
  display: block;
  margin: .15rem 0;
}

body:is(#registration, #authentication) .register-form .custom-checkbox label {
  position: relative;
  display: block;
  margin: 0;
  padding: .48rem .6rem .48rem 1.95rem;
  border-radius: 7px;
  color: var(--mde-ink);
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s ease;
}

body:is(#registration, #authentication) .register-form .custom-checkbox label:hover {
  background: var(--mde-cream);
}

/* Case carrée plus nette, aux couleurs MDE */
body:is(#registration, #authentication) .register-form .custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

body:is(#registration, #authentication) .register-form .custom-checkbox input[type="checkbox"] + span {
  position: absolute;
  top: .58rem;
  left: .55rem;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid rgba(27, 83, 126, .55);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}

body:is(#registration, #authentication) .register-form .custom-checkbox input[type="checkbox"]:checked + span {
  border-color: var(--mde-blue);
  background: var(--mde-blue);
}

body:is(#registration, #authentication) .register-form .custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  color: #fff;
  font-size: .95rem;
  line-height: 1rem;
}

body:is(#registration, #authentication) .register-form .custom-checkbox input[type="checkbox"]:focus-visible + span {
  outline: 2px solid rgba(27, 83, 126, .35);
  outline-offset: 2px;
}

/* Les explications longues restent secondaires et lisibles. */
body:is(#registration, #authentication) .register-form .custom-checkbox em,
body:is(#registration, #authentication) .register-form .custom-checkbox i:not(.material-icons) {
  display: block;
  margin-top: .28rem;
  color: var(--mde-muted);
  font-size: .86rem;
  font-style: normal;
  line-height: 1.42;
}

/* Un peu plus d'air entre les blocs de consentement. */
body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) {
  margin-bottom: .35rem;
}

@media (max-width: 767px) {
  @supports selector(.form-group:has(.custom-checkbox)) {
    body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) > .col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
      margin-left: 0;
    }
  }

  body:is(#registration, #authentication) .register-form .custom-checkbox label {
    padding-right: .35rem;
  }
}

/* =========================================================
   Ajustement final — zone consentements
   Plus de largeur et de respiration, sans agrandir la carte.
   ========================================================= */

@supports selector(.form-group:has(.custom-checkbox)) {
  body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) {
    display: block;
    width: 100%;
    margin: 0 0 .45rem;
    padding-left: 25%;
  }

  body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) > .form-control-label,
  body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) .form-control-label {
    display: none !important;
  }

  body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) > div,
  body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

body:is(#registration, #authentication) .register-form .custom-checkbox {
  width: 100%;
  max-width: none;
}

body:is(#registration, #authentication) .register-form .custom-checkbox label {
  width: 100%;
  max-width: none;
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-right: .8rem;
}

body:is(#registration, #authentication) .register-form .custom-checkbox em,
body:is(#registration, #authentication) .register-form .custom-checkbox i:not(.material-icons) {
  max-width: 34rem;
  margin-top: .35rem;
  line-height: 1.48;
}

@media (max-width: 767px) {
  @supports selector(.form-group:has(.custom-checkbox)) {
    body:is(#registration, #authentication) .register-form .form-group:has(.custom-checkbox) {
      padding-left: 0;
    }
  }
}

/* =========================================================
   Connexion — extension de la base graphique MDE
   ========================================================= */

body#authentication #content {
  max-width: 640px;
  margin: 0 auto 2rem;
  padding: 1.45rem 1.6rem 1.25rem;
  border: 3px solid var(--mde-yellow);
  border-radius: var(--mde-radius);
  background: var(--mde-cream);
  box-shadow: 0 8px 22px rgba(47, 61, 73, .06);
}

/* Libellés */
body#authentication .login-form .form-control-label {
  color: var(--mde-blue-dark);
  font-weight: 700;
}

/* Champs */
body#authentication .login-form .form-control {
  min-height: 42px;
  border: 1px solid rgba(27, 83, 126, .34);
  border-radius: 7px;
  background: #fff;
  color: var(--mde-ink);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body#authentication .login-form .form-control:hover {
  border-color: rgba(27, 83, 126, .55);
}

body#authentication .login-form .form-control:focus {
  border-color: var(--mde-blue);
  box-shadow: 0 0 0 3px rgba(27, 83, 126, .10);
  outline: none;
}

/* Mot de passe : bouton AFFICHER */
body#authentication .login-form .input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body#authentication .login-form .input-group .input-group-btn .btn,
body#authentication .login-form .input-group .btn {
  min-height: 42px;
  border: 1px solid var(--mde-blue);
  border-radius: 0 7px 7px 0;
  background: var(--mde-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

body#authentication .login-form .input-group .input-group-btn .btn:hover,
body#authentication .login-form .input-group .btn:hover {
  border-color: var(--mde-blue-dark);
  background: var(--mde-blue-dark);
}

/* Mot de passe oublié */
body#authentication .login-form .forgot-password {
  margin-top: .55rem;
  text-align: center;
}

body#authentication .login-form .forgot-password a {
  color: var(--mde-blue);
  font-weight: 600;
}

body#authentication .login-form .forgot-password a:hover {
  color: var(--mde-blue-dark);
  text-decoration: underline;
}

/* Bouton CONNEXION */
body#authentication .login-form .form-footer {
  margin-top: .9rem;
  text-align: center;
}

body#authentication .login-form .form-footer .btn-primary,
body#authentication .login-form button[type="submit"].btn-primary,
body#authentication #submit-login {
  min-height: 44px;
  padding: .72rem 1.35rem;
  border: 2px solid var(--mde-blue);
  border-radius: 8px;
  background: var(--mde-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

body#authentication .login-form .form-footer .btn-primary:hover,
body#authentication .login-form button[type="submit"].btn-primary:hover,
body#authentication #submit-login:hover {
  border-color: var(--mde-blue-dark);
  background: var(--mde-blue-dark);
}

/* Séparateur + création de compte */
body#authentication #content > hr {
  margin: 1rem 0 .8rem;
  border: 0;
  border-top: 1px solid rgba(27, 83, 126, .18);
}

body#authentication .no-account {
  text-align: center;
}

body#authentication .no-account a {
  color: var(--mde-blue);
  font-weight: 600;
}

body#authentication .no-account a:hover {
  color: var(--mde-blue-dark);
  text-decoration: underline;
}

@media (max-width: 767px) {
  body#authentication #content {
    padding: 1.1rem 1rem 1rem;
  }

  body#authentication .login-form .form-footer .btn-primary,
  body#authentication .login-form button[type="submit"].btn-primary,
  body#authentication #submit-login {
    width: 100%;
  }
}

/* =========================================================
   En-tête des pages de formulaire
   Centré au-dessus de la carte au lieu d'être décalé à gauche.
   ========================================================= */

/* Connexion */
body#authentication .breadcrumb,
body#authentication #main .page-header {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body#authentication .breadcrumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

body#authentication #main .page-header h1,
body#authentication #main h1 {
  text-align: center;
}

/* Inscription */
body#registration .breadcrumb,
body#registration #main .page-header {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body#registration .breadcrumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

body#registration #main .page-header h1,
body#registration #main h1 {
  text-align: center;
}

/* =========================================================
   Mot de passe oublié — extension de la base graphique MDE
   ========================================================= */

body#password .breadcrumb,
body#password #main .page-header {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body#password .breadcrumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

body#password #main .page-header h1,
body#password #main h1 {
  color: var(--mde-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-align: center;
  text-transform: none;
}

/* Carte principale */
body#password .forgotten-password {
  max-width: 760px;
  margin: 0 auto 1rem;
  padding: 1.35rem 1.5rem 1.45rem;
  border: 3px solid var(--mde-yellow);
  border-radius: var(--mde-radius);
  background: var(--mde-cream);
  box-shadow: 0 8px 22px rgba(47, 61, 73, .06);
}

/* Texte explicatif */
body#password .forgotten-password .send-renew-password-link,
body#password .forgotten-password header p {
  margin: 0 0 1.15rem;
  color: var(--mde-muted);
  line-height: 1.5;
  text-align: center;
}

/* Ligne e-mail */
body#password .forgotten-password .form-control-label {
  color: var(--mde-blue-dark);
  font-weight: 700;
}

body#password .forgotten-password .form-control {
  min-height: 42px;
  border: 1px solid rgba(27, 83, 126, .34);
  border-radius: 7px;
  background: #fff;
  color: var(--mde-ink);
  box-shadow: none;
}

body#password .forgotten-password .form-control:hover {
  border-color: rgba(27, 83, 126, .55);
}

body#password .forgotten-password .form-control:focus {
  border-color: var(--mde-blue);
  box-shadow: 0 0 0 3px rgba(27, 83, 126, .10);
  outline: none;
}

/* Bouton d'envoi */
body#password .forgotten-password .btn-primary,
body#password .forgotten-password .form-control-submit {
  min-height: 42px;
  padding: .68rem 1.15rem;
  border: 2px solid var(--mde-blue);
  border-radius: 8px;
  background: var(--mde-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  white-space: normal;
}

body#password .forgotten-password .btn-primary:hover,
body#password .forgotten-password .form-control-submit:hover {
  border-color: var(--mde-blue-dark);
  background: var(--mde-blue-dark);
  color: #fff;
}

/* Retour à la connexion */
body#password .page-footer,
body#password #main .page-footer {
  max-width: 760px;
  margin: .75rem auto 1.5rem;
  text-align: center;
}

body#password .page-footer a,
body#password #main .page-footer a {
  color: var(--mde-blue);
  font-weight: 600;
}

body#password .page-footer a:hover,
body#password #main .page-footer a:hover {
  color: var(--mde-blue-dark);
  text-decoration: underline;
}

@media (max-width: 767px) {
  body#password .forgotten-password {
    padding: 1.1rem 1rem 1.2rem;
  }

  body#password .forgotten-password .btn-primary,
  body#password .forgotten-password .form-control-submit {
    width: 100%;
    margin-top: .6rem;
  }
}

/* =========================================================
   Correctif Mot de passe oublié — bouton trop long
   Le champ reste sur une ligne claire ; le bouton passe dessous,
   centré, comme les autres actions principales MDE.
   ========================================================= */

@media (min-width: 768px) {
  body#password .forgotten-password .center-email-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  body#password .forgotten-password .center-email-fields > .form-control-label {
    flex: 0 0 24%;
    max-width: 24%;
  }

  body#password .forgotten-password .center-email-fields > .email {
    flex: 0 0 60%;
    max-width: 60%;
  }

  body#password .forgotten-password .center-email-fields > #send-reset-link,
  body#password .forgotten-password .center-email-fields > .form-control-submit {
    flex: 0 0 auto;
    width: auto;
    min-width: 250px;
    margin: .95rem auto 0;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  body#password .forgotten-password .center-email-fields {
    display: block;
  }

  body#password .forgotten-password .center-email-fields > .form-control-label,
  body#password .forgotten-password .center-email-fields > .email {
    width: 100%;
    max-width: 100%;
  }
}


/* =========================================================
   Contactez-nous — formulaire natif PrestaShop
   Habillage graphique MDE uniquement.
   Aucun template, JS, routage ou comportement natif n'est modifié.
   ========================================================= */

/* Largeur générale de la page */
body#contact #main {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Titres de la page */
body#contact .contact-rich h4,
body#contact .contact-form h3,
body#contact #main .page-header h1,
body#contact #main h1 {
  color: var(--mde-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-transform: none;
}

/* Colonne Informations */
body#contact .contact-rich {
  padding: 1.35rem 1.25rem;
  border: 1px solid rgba(27, 83, 126, .38);
  border-radius: var(--mde-radius);
  background: var(--mde-pale-blue);
  color: var(--mde-ink);
  box-shadow: 0 8px 22px rgba(47, 61, 73, .04);
}

body#contact .contact-rich h4 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
}

body#contact .contact-rich .block {
  padding: .85rem 0;
  border-bottom: 1px solid rgba(27, 83, 126, .16);
}

body#contact .contact-rich .block:last-child {
  border-bottom: 0;
}

body#contact .contact-rich .icon {
  color: var(--mde-blue);
}

body#contact .contact-rich .data,
body#contact .contact-rich .data a {
  color: var(--mde-ink);
}

body#contact .contact-rich .data a {
  color: var(--mde-blue);
  font-weight: 600;
}

body#contact .contact-rich .data a:hover {
  color: var(--mde-blue-dark);
  text-decoration: underline;
}

/* Carte du formulaire */
body#contact .contact-form {
  padding: 1.45rem 1.6rem 1.5rem;
  border: 3px solid var(--mde-yellow);
  border-radius: var(--mde-radius);
  background: var(--mde-cream);
  box-shadow: 0 8px 22px rgba(47, 61, 73, .06);
}

body#contact .contact-form h3 {
  margin: 0 0 1.25rem;
  font-size: 1.45rem;
}

body#contact .contact-form .form-group {
  margin-bottom: 1rem;
}

body#contact .contact-form .form-control-label {
  color: var(--mde-blue-dark);
  font-weight: 700;
}

/* Champs, select et textarea */
body#contact .contact-form .form-control,
body#contact .contact-form select.form-control,
body#contact .contact-form textarea.form-control {
  border: 1px solid rgba(27, 83, 126, .34);
  border-radius: 7px;
  background: #fff;
  color: var(--mde-ink);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body#contact .contact-form .form-control {
  min-height: 42px;
}

body#contact .contact-form textarea.form-control {
  min-height: 130px;
  resize: vertical;
}

body#contact .contact-form .form-control:hover,
body#contact .contact-form select.form-control:hover,
body#contact .contact-form textarea.form-control:hover {
  border-color: rgba(27, 83, 126, .55);
}

body#contact .contact-form .form-control:focus,
body#contact .contact-form select.form-control:focus,
body#contact .contact-form textarea.form-control:focus {
  border-color: var(--mde-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27, 83, 126, .10);
  outline: none;
}

body#contact .contact-form .form-control::placeholder,
body#contact .contact-form textarea.form-control::placeholder {
  color: #8A969F;
  opacity: 1;
}

/* Mentions "optionnel" et aides */
body#contact .contact-form .form-control-comment,
body#contact .contact-form .form-text,
body#contact .contact-form small {
  color: var(--mde-muted);
  font-size: .86rem;
  line-height: 1.35;
}

/* Document joint : bouton natif PrestaShop */
body#contact .contact-form .input-group .btn,
body#contact .contact-form .input-group .input-group-btn .btn,
body#contact .contact-form .btn-secondary {
  min-height: 42px;
  border-color: var(--mde-blue);
  background: var(--mde-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

body#contact .contact-form .input-group .btn:hover,
body#contact .contact-form .input-group .input-group-btn .btn:hover,
body#contact .contact-form .btn-secondary:hover {
  border-color: var(--mde-blue-dark);
  background: var(--mde-blue-dark);
  color: #fff;
}

/* Bouton Envoyer */
body#contact .contact-form .form-footer {
  margin-top: 1.15rem;
  text-align: right;
}

body#contact .contact-form .form-footer .btn-primary,
body#contact .contact-form button[type="submit"].btn-primary,
body#contact .contact-form input[type="submit"].btn-primary {
  min-height: 44px;
  padding: .72rem 1.35rem;
  border: 2px solid var(--mde-blue);
  border-radius: 8px;
  background: var(--mde-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}

body#contact .contact-form .form-footer .btn-primary:hover,
body#contact .contact-form button[type="submit"].btn-primary:hover,
body#contact .contact-form input[type="submit"].btn-primary:hover {
  border-color: var(--mde-blue-dark);
  background: var(--mde-blue-dark);
  color: #fff;
}

body#contact .contact-form .form-footer .btn-primary:focus,
body#contact .contact-form button[type="submit"].btn-primary:focus,
body#contact .contact-form input[type="submit"].btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(27, 83, 126, .14);
  outline: none;
}

/* Responsive : les deux blocs se lisent l'un sous l'autre */
@media (max-width: 767px) {
  body#contact .contact-rich,
  body#contact .contact-form {
    margin-bottom: 1rem;
    padding: 1.1rem 1rem 1.2rem;
  }

  body#contact .contact-form .form-control-label {
    margin-bottom: .35rem;
  }

  body#contact .contact-form .form-footer .btn-primary,
  body#contact .contact-form button[type="submit"].btn-primary,
  body#contact .contact-form input[type="submit"].btn-primary {
    width: 100%;
  }
}


/* =========================================================
   MDE — Harmonisation formulaires / filtres
   03/10/2026
   Le fond principal des cartes de formulaire reprend désormais
   exactement le crème très léger des frames de filtres : #FFFEF1.
   ========================================================= */