/* rodriguepoclet.fr — page /contact (docs/maquettes/contact/, planches « Retenu » ; spec §3.1, §5.6, §5.7).
   Colonne de gauche : présentation, encart d'appel, carte de présentation ; à droite : formulaire ou succès.
   Point de rupture : 900 px. Sous 900 px, une colonne : l'encart d'appel avant le formulaire, la présentation après. */

.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; padding: 72px var(--marge) 112px; }
.contact__colonne { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.contact__titre { font-size: clamp(44px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.03em; }
.contact__texte { color: var(--encre-douce); font-size: 19px; line-height: 1.6; }
.contact__engagements { display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.5; list-style: none; }
.contact__engagements li { display: flex; gap: 14px; }
.contact__engagements svg { flex-shrink: 0; margin-top: 2px; color: var(--orange-texte); }

/* ---------- encart d'appel (Calendly) ---------- */
.contact-appel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 8px; padding: 28px; border-radius: 22px; background: var(--nuit); color: var(--sur-nuit); }
.contact-appel__titre { font-size: 26px; line-height: 1.15; }
.contact-appel__texte { color: var(--sur-nuit-doux); font-size: 16px; line-height: 1.55; }
.contact-appel__bouton { min-height: 52px; padding: 0 26px; border: 2px solid var(--orange); background: transparent; color: var(--sur-nuit); font-size: 16px; }
.contact-appel__bouton:hover { background: rgba(245, 146, 29, .14); color: var(--sur-nuit); }
.contact-appel__note { color: #A9B1C2; font-size: 13px; line-height: 1.5; }
.contact-appel :focus-visible { outline-color: var(--orange); }

/* ---------- carte de présentation ---------- */
.contact-presentation { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 20px; background: var(--sable); }
.contact-presentation img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; }
.contact-presentation p { display: flex; flex-direction: column; gap: 4px; }
.contact-presentation strong { font-size: 17px; }
.contact-presentation span { color: var(--gris); font-size: 15px; line-height: 1.45; }

/* ---------- formulaire ---------- */
.contact-formulaire, .contact-succes { display: flex; flex-direction: column; gap: 28px; padding: 48px; border-radius: 28px; background: var(--blanc); box-shadow: 0 24px 56px rgba(20, 27, 45, .08); }
.contact-formulaire__obligatoires, .contact-champ__aide { color: var(--gris); font-size: 14px; line-height: 1.5; }
.contact-sujets { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-sujets .contact-champ__aide { margin: 4px 0 12px; }
.contact-sujets .contact-champ__erreur { margin-top: 10px; }
.contact-sujets__choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-sujet { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 2px solid #D5DAE3; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; }
.contact-sujet:has(input:checked) { border-color: var(--orange-texte); background: #FFF4E6; }
.contact-sujet input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--orange-texte); }
.contact-champs--deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.contact-champ { display: flex; flex-direction: column; gap: 8px; }
.contact-champ__libelle { padding: 0; font-size: 15px; font-weight: 600; }
.contact-champ__saisie { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #8C95A6; border-radius: 12px; background: var(--blanc); color: var(--encre); font: 16px/1.55 var(--police-texte); }
.contact-champ__saisie--message { min-height: 190px; padding: 14px 16px; resize: vertical; }
.contact-champ__saisie::placeholder { color: var(--gris); }
.contact-champ__saisie:disabled { background: #F1F2F4; opacity: .6; cursor: not-allowed; }
.contact-champ__saisie[aria-invalid="true"] { border: 2px solid #B42318; }
.contact-champ__erreur { display: flex; gap: 8px; color: #B42318; font-size: 14px; line-height: 1.45; }
.contact-champ__erreur svg, .contact-alerte svg { flex-shrink: 0; margin-top: 1px; }
.contact-case { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; }
.contact-case input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--orange-texte); }
.contact-resume { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; border: 1px solid #F1B9B4; border-radius: 16px; background: #FEF3F2; color: #9F1D14; }
.contact-resume:focus { outline: 2px solid var(--orange-texte); outline-offset: 3px; }
.contact-resume__titre { font-family: var(--police-texte); font-size: 17px; letter-spacing: 0; }
.contact-resume__liste { display: flex; flex-direction: column; padding-left: 20px; font-size: 15px; }
/* Chaque lien du résumé est une cible de 44 px ; la liste n'ajoute donc pas d'espace entre les lignes. */
.contact-resume__liste a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-resume a { color: #9F1D14; }
.contact-alerte { display: flex; gap: 10px; padding: 14px 18px; border: 1px solid #F1B9B4; border-radius: 14px; background: #FEF3F2; color: #9F1D14; font-size: 15px; line-height: 1.5; }
.contact-formulaire__noscript { color: var(--gris); font-size: 14px; line-height: 1.5; }
.contact-formulaire__piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-formulaire__envoi { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* Envoi en cours (contact.js) : un fond plus clair sous le texte intact, non un opacity (l'orange à 70 % sous le texte
   ne donnerait que 3,5:1 ; ici 9,5:1), sans le soulèvement du survol ; le libellé devient « Envoi en cours… ». */
.contact-formulaire [data-contact-envoyer]:disabled { background: #F8B361; box-shadow: none; transform: none; cursor: progress; }
.contact-formulaire__confidentialite { color: var(--gris); font-size: 14px; line-height: 1.5; }
.contact-formulaire__confidentialite a { color: var(--gris); }

/* ---------- récapitulatifs pré-remplis ---------- */
.contact-recap { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 18px; background: var(--sable); }
.contact-recap__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.contact-recap__titre { font-family: var(--police-texte); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.contact-recap__lien, .contact-module__lien { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; }
.contact-recap__lignes { display: flex; flex-direction: column; gap: 10px; margin: 0; font-size: 15px; line-height: 1.45; }
.contact-recap__lignes div { display: flex; justify-content: space-between; gap: 16px; }
.contact-recap__lignes dt { display: flex; flex-direction: column; }
.contact-recap__lignes dt span { color: var(--gris); }
.contact-recap__lignes dd { margin: 0; white-space: nowrap; }
.contact-recap__total { padding-top: 12px; border-top: 1px solid #D6D1C4; }
.contact-recap__total dd { font-weight: 700; }
.contact-recap__note { color: var(--gris); font-size: 14px; line-height: 1.5; }
.contact-module { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 18px; background: var(--sable); }
.contact-module__icone { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--nuit); color: var(--orange); }
.contact-module p { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.contact-module p span { color: var(--gris); }
.contact-module strong { font-size: 18px; }

/* ---------- succès et appel en option ---------- */
.contact-succes { gap: 22px; }
.contact-succes__tete { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.contact-succes__coche { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #E9F5EE; color: #1F6B3A; }
.contact-succes__titre { font-size: 40px; line-height: 1.08; letter-spacing: -0.025em; }
.contact-succes__titre:focus { outline: none; }
.contact-succes__texte { color: var(--encre-douce); font-size: 18px; line-height: 1.6; }
.contact-option { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border-radius: 20px; background: var(--sable); }
.contact-option__titre { font-size: 24px; line-height: 1.2; }
.contact-option__texte { color: var(--encre-douce); font-size: 16px; line-height: 1.55; }
.contact-option__bouton { min-height: 52px; border: 2px solid var(--nuit); background: var(--blanc); color: var(--nuit); font-size: 16px; }
.contact-option__bouton:hover { color: var(--nuit); }
.contact-option__note { color: var(--gris); font-size: 13px; line-height: 1.5; }
/* Agenda Calendly en ligne : 320 px de large au moins, 700 px de haut (code d'intégration de Calendly). */
.contact-agenda { align-self: stretch; min-width: 320px; height: 700px; overflow: hidden; border-radius: 14px; background: var(--blanc); }
.contact-option__confirme { display: flex; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #E9F5EE; color: #1F6B3A; font-size: 15px; line-height: 1.5; }
.contact-option__confirme svg { flex-shrink: 0; }

@media (min-width: 900px) and (max-width: 1279px) {
  .contact { gap: 48px; }
  .contact-formulaire, .contact-succes { padding: 40px; }
}

@media (max-width: 899px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 20px 48px; }
  /* Une colonne : les éléments de la colonne de gauche se rangent autour du formulaire (ordre de la maquette mobile). */
  .contact__colonne { display: contents; }
  .contact .surtitre { gap: 10px; font-size: 12px; }
  .contact__titre { font-size: 40px; line-height: 1.06; }
  .contact__texte { font-size: 17px; line-height: 1.55; }
  .contact__engagements { gap: 12px; font-size: 16px; line-height: 1.45; }
  .contact-appel { order: 1; align-items: stretch; margin-top: 10px; padding: 22px 20px; border-radius: 20px; }
  .contact-appel__titre { font-size: 22px; line-height: 1.2; }
  .contact-appel__texte { font-size: 15px; }
  .contact__cartes { order: 2; margin-top: 10px; }
  .contact-presentation { order: 3; margin-top: 10px; gap: 14px; padding: 18px; border-radius: 18px; }
  .contact-presentation img { width: 52px; height: 52px; }
  .contact-presentation strong { font-size: 16px; }
  .contact-presentation span { font-size: 14px; }
  .contact-formulaire { gap: 24px; padding: 26px 20px 28px; border-radius: 22px; box-shadow: none; }
  .contact-sujets__choix { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .contact-sujet { min-height: 52px; padding: 0 14px; }
  .contact-champs--deux { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact-champ__saisie { padding: 0 14px; }
  .contact-champ__saisie--message { min-height: 200px; padding: 12px 14px; }
  .contact-formulaire__envoi .bouton { align-self: stretch; min-height: 56px; }
  .contact-formulaire__confidentialite { font-size: 13px; }
  .contact-recap { padding: 18px 16px; }
  .contact-module { padding: 16px; }
  .contact-succes { padding: 24px 12px; border-radius: 22px; box-shadow: none; }
  .contact-succes__tete { padding: 0 8px; }
  .contact-succes__titre { font-size: 32px; }
  .contact-succes__texte { font-size: 16px; }
  .contact-option { align-items: stretch; padding: 18px 12px; border-radius: 18px; }
  .contact-option__titre { font-size: 21px; }
  .contact-option__texte { font-size: 15px; }
  /* Agenda : il perd sa largeur minimale de 320 px et annule le retrait de 12 px de la carte sable (100 % + 24 px, marges
     de -12 px) pour en occuper toute la largeur. Cette largeur est celle de l'écran moins 64 px : 256 px à 320 px d'écran,
     311 px à 375 px ; les 320 px du code d'intégration de Calendly ne sont atteints qu'à partir de 384 px. */
  .contact-agenda { min-width: 0; width: calc(100% + 24px); height: 1000px; margin: 0 -12px; }
}

/* Écran très étroit (320 px) : le lien « Revoir la page » passe sous le texte du module au lieu de s'écraser à côté. */
@media (max-width: 359px) {
  .contact-module { flex-wrap: wrap; row-gap: 0; }
  .contact-module p { flex-basis: 120px; }
}

/* Turnstile invisible (spec §5.6) : en « interaction-only », la vérification tourne en arrière-plan et Cloudflare ne
   montre la case qu'aux visiteurs qu'il juge douteux. Tant qu'elle est cachée, le bloc sort du flux (aucun vide ni écart
   en plus dans la colonne du formulaire) sans display: none, que Turnstile prendrait pour un widget masqué par erreur.
   contact.js ajoute .is-affiche quand la case apparaît : la consigne et le widget reprennent leur place. */
.contact-antispam { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-antispam:not(.is-affiche) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-antispam__consigne { color: var(--encre); font-size: 15px; font-weight: 600; line-height: 1.5; }
/* Le jeton arrivé, la consigne se cache sans libérer sa place (45 à 68 px selon la largeur) : le bouton ne bouge pas sous le
   doigt du visiteur, et un lecteur d'écran ne la lit plus. */
.contact-antispam__consigne.is-cachee { visibility: hidden; }

/* Widget affiché : son cadre fait 300 × 65 px (taille « normal », imposée par Cloudflare) et le contenu de la carte n'a que
   « largeur de l'écran − 80 px » sous 900 px (240 px à 320 px d'écran, 299 px à 379 px). Sous 380 px, il est donc réduit,
   par paliers de 20 px d'écran, à (écran le plus étroit du palier − 80 px) / 300 px : .8, .86, .93. La réduction ne libère
   pas la place : la marge négative reprend les 65 px × (1 − échelle) laissés vides sous le cadre. Widget caché : rien. */
@media (max-width: 379px) {
  .contact-antispam.is-affiche .contact-antispam__widget { --echelle: .93; transform: scale(var(--echelle)); transform-origin: left top; margin-bottom: calc(65px * (var(--echelle) - 1)); }
}
@media (max-width: 359px) { .contact-antispam.is-affiche .contact-antispam__widget { --echelle: .86; } }
@media (max-width: 339px) { .contact-antispam.is-affiche .contact-antispam__widget { --echelle: .8; } }

@media (prefers-reduced-motion: no-preference) {
  .contact .pastille { animation: pouls 2s ease-out infinite; }
}