.contact_main {
  padding: 5rem 0 153px;
  max-width: 1316px;
  margin: 0 auto;
}
/* Une seule colonne depuis le retrait de la photo : elle se centre elle-même.
   « flex: 1 » n'a plus d'objet, son conteneur flex ayant disparu du gabarit. */
.contact_main .right {
  max-width: 804px;
  margin: 0 auto;
}
.contact_main .right .head {
  margin-bottom: 48px;
}
/* Le titre (H1) descend à 40px : sur une page de formulaire, un titre de 64px
   pesait autant que le titre-marque du Studio. La salutation « Bonjour,
   IMAGINRAY ! » (.ir-lettre-appel) garde ses 64px — c'est l'accroche
   épistolaire qu'on veut mémorable (cf. revue). Règles séparées désormais. */
/* (Une règle « .contact_main .right .head h1 » a vécu ici : le H1 n'est PAS
   dans .head — seul la salutation y est — elle ne s'appliquait donc jamais.
   Le vrai titre est .ir-contact-titre, plus bas.) */
.contact_main .right .head .ir-lettre-appel {
  font-size: 64px;
  font-weight: 300;
  line-height: 75px;
  letter-spacing: 3px;
}
.contact_main .right form {
  display: flex;
  flex-direction: column;
  row-gap: 33px;
}
.contact_main .right form label {
  font-size: 24px;
  font-weight: 300;
  display: flex;
  align-items: center;
  letter-spacing: 1.3px;
  cursor: pointer;
}
.contact_main .right form label.textarea {
  display: block;
  width: unset;
}
.contact_main .right form label input {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 400;
  width: 50.7463%;
  line-height: 45px;
  letter-spacing: 0.9px;
  border-bottom: 2px solid #a8a8a8;
}
.contact_main .right form label input::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: #a8a8a8;
  letter-spacing: 0.9px;
}
.contact_main .right form label textarea {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  margin-top: 21px;
  border-bottom: 2px solid #a8a8a8;
  padding-bottom: 6px;
}
.contact_main .right form .submit {
  display: flex;
  justify-content: end;
  margin-top: 20px;
  padding-right: 10px;
}
/* Le bouton d'envoi : bouton PRIMAIRE du système (rapport 3.5) — plein noir,
   texte blanc, coins carrés, 48px de haut, comme le CTA « demander un devis ».
   C'est le vrai <button>/<input> qui porte l'apparence (et non un <span>
   décoratif à côté d'un submit caché) : sans ça, au clavier on remplissait le
   formulaire sans jamais pouvoir l'envoyer, et aucun lecteur d'écran n'annonçait
   de bouton. La flèche de l'ancien dessin est retirée — un bouton primaire est
   plein, la flèche reste au vocabulaire des liens secondaires. */
.contact_main .right form .submit .ir-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: #0a0a0a;
  font-family: inherit;
  line-height: 1.2;
  padding: 0 30px;
  min-height: 48px;
  transition: background-color 0.2s ease;
}
/* Le même glissement de 5px qu'avant, obtenu en rapprochant la flèche du
   bord plutôt qu'en la déplaçant : une image de fond ne peut pas sortir de
   sa boîte, alors que le ::after le pouvait. */
.contact_main .right form .submit .ir-submit:hover {
  background: #262626;
}

.wpcf7-not-valid-tip{
  font-size: 16px!important;
  display: block;
  margin-top: .5rem;
  margin-left: .8rem;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  border: none;
  margin: 0;
  font-size: 18px;
}
@media screen and (min-width: 1513px) {
  .contact_main {
    max-width: 1760px;
  }
  .contact_main .content {
    max-width: 100%;
  }
  .contact_main .right {
    max-width: 980px;
  }
  .contact_main .right .head {
    margin-bottom: 40px;
  }
  .contact_main .right form {
    gap: 38px;
  }
  .contact_main .right form label { 
    font-weight: normal;
  }
  .contact_main .right form label input {
    width: 100%;
  }
  .contact_main .right form .submit {
    margin-top: 10px;
  }
}

/* Alignement du bord droit des champs.
   Chaque <label> occupe toute la largeur de la colonne, mais l'enveloppe que
   Contact Form 7 pose autour du champ ne s'étire jamais d'elle-même : ni en
   ligne (flex-grow: 0), ni en colonne (align-items: start la ramène à la
   largeur de son contenu). Le champ s'arrêtait donc où il pouvait — « Je
   suis » à 710px, « ou via mon numéro » à 852, « Je suis joignable via mon
   e-mail » à 1007 — pendant que la zone de message, elle, allait jusqu'au
   bord. Quatre fins de ligne différentes sous un titre de 64px : c'était le
   seul vrai défaut une fois la photo retirée.
   On étire l'enveloppe. Tout se cale alors sur une même verticale. */
.contact_main .right form label > .wpcf7-form-control-wrap {
  width: 100%;
}
/* La marge de 10px écartait le champ du libellé quand il était collé à lui.
   Ajoutée à width:100%, elle dépassait la colonne de 10px — visible entre 786
   et 1000px, où rien ne la neutralisait. L'écart est repris par column-gap,
   qui ne s'ajoute pas à la largeur. */
.contact_main .right form label > .wpcf7-form-control-wrap input {
  margin-left: 0;
}

/* Au-delà de 1000px le label tient sur une ligne : l'enveloppe prend la place
   restante au lieu d'une largeur fixe. En dessous il passe en colonne
   (mobile.css, ipad.css) et la règle ci-dessus suffit.
   L'écart avec le libellé passe par column-gap et non plus par une marge sur
   le champ : additionnée à width:100%, elle débordait la colonne de 10px. */
@media screen and (min-width: 1001px) {
  .contact_main .right form label {
    column-gap: 10px;
  }
  .contact_main .right form label > .wpcf7-form-control-wrap {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .contact_main .right form label input {
    width: 100%;
  }
}

/* La phrase qui annonce les trois façons de nous joindre. Elle ouvre la page,
   au-dessus du « Bonjour » : voir le gabarit pour la raison — la suite est une
   lettre écrite par le visiteur, et cette phrase-ci est l'atelier qui parle.
   Discrète, elle ne doit pas concurrencer le titre ; ses liens restent
   identifiables par le soulignement, sans couleur — le site n'emploie pas de
   bleu. */
.ir-contact-intro {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: #333;
  max-width: 46rem;
  margin: 0 0 30px;
}
.ir-contact-intro a {
  color: #000;
  border-bottom: 1px solid #bdbdbd;
  transition: border-color 0.3s;
  white-space: nowrap;
}
.ir-contact-intro a:hover {
  border-bottom-color: #000;
}
@media screen and (max-width: 786px) {
  .ir-contact-intro {
    font-size: 15px;
    margin: 0 0 22px;
  }
}

/* Le message de confirmation.
   Le thème avait remis à plat l'état d'erreur (bordure retirée, texte simple)
   mais laissé l'état « envoyé » à l'apparence d'origine de Contact Form 7 :
   un cadre vert de 2px. Sur un site qui n'emploie aucune couleur, c'était le
   seul élément coloré de toutes les pages — et il apparaissait précisément au
   moment qui doit inspirer confiance.
   Il compte double ici : le propriétaire ne veut pas d'accusé de réception par
   courriel, donc cette ligne est la seule confirmation que le visiteur aura
   jamais. Elle reste donc bien lisible — plus grande que le corps de texte —
   mais dans la langue graphique du site. Le texte se suffit à lui-même et ne
   dépend d'aucune couleur pour être compris. */
.contact_main .wpcf7 form.sent .wpcf7-response-output {
  /* Contact Form 7 pose sa propre couleur de bordure avec un sélecteur de même
     spécificité, chargé après celui-ci : il l'emportait. On préfixe par
     .contact_main plutôt que d'écrire !important. */
  border: none;
  border-color: #000;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid #000;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
}
@media screen and (max-width: 786px) {
  .contact_main .wpcf7 form.sent .wpcf7-response-output {
    font-size: 17px;
    margin-top: 1.5rem;
  }
}


/* Titre de page — LE titre invariant (32/300/2px, comme partout depuis le
   29/08/2026) ; il était resté à 40 parce que la correction avait visé une
   règle morte (voir ci-dessus). La formule d'appel garde ses 64px d'accroche. */
.ir-contact-titre {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 2px;
  color: #000;
  margin: 0 0 22px;
  max-width: 46rem;
}

/* Le spinner de Contact Form 7 (24px + ses marges) comptait dans la largeur
   de la ligne du bouton : sur un viewport synthétique de 390px cela donnait
   7-10px de défilement horizontal (rapport de recette du 30/08 ; jamais
   reproduit sur appareil réel). Posé en absolu il ne pousse plus rien, et
   reste visible à côté du bouton pendant l'envoi. */
.contact_main form .submit,
.contact_main form .ir-submit {
  position: relative;
}
.contact_main form .wpcf7-spinner {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 0 0 10px;
}

/* Mention RGPD sous le formulaire (ajoutée le 31/08/2026) : discrète, elle
   informe sans peser — exigence d'information de l'article 13 du RGPD. */
.contact_main form .ir-rgpd {
  font-size: 12.5px;
  font-weight: 300;
  color: #666;
  line-height: 1.5;
  margin: 4px 0 0;
}
.contact_main form .ir-rgpd a {
  color: #444;
  border-bottom: 1px solid #bdbdbd;
}