/* ==========================================================================
   Atelier prose — formulaire de demande de projet
   --------------------------------------------------------------------------
   Composant réutilisable, utilisé sur index.html (section « Prendre
   rendez-vous ») et sur contact.html (sous le bloc .omee-contact-info).
   Inséré dans les pages par tools/activate-form.js.

   Ce fichier est chargé APRÈS assets/omee-enhance.css : il a donc le dernier
   mot à specificité égale. Les règles globales de la couche « enhance »
   utilisent des sélecteurs !important de spécificité (2,0,1)
   (#site-root :is(…, label, button, …):not(#_)) ; les quelques déclarations
   qui doivent les battre sont donc doublées d'un bloc « :not(#_):not(#_) »
   de spécificité (2,2,0) plus bas. Le composant reste correct que ces règles
   globales soient présentes ou non.

   Identité : texte #4A3523 · surfaces #F7F5ED · accent #A1BAC9 · Poppins AP
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons + boîte du composant
   -------------------------------------------------------------------------- */
.prose-form-block{
  --pf-text:#4A3523;
  --pf-surface:#F7F5ED;
  --pf-accent:#A1BAC9;
  --pf-line:rgba(74,53,35,.30);
  --pf-line-hover:rgba(74,53,35,.55);
  /* Texte volontairement plus discret (intro, note, texte indicatif). C'est le
     brun de la charte avec de la transparence — pas une seconde couleur : sur
     #F7F5ED cela donne rgb(112,95,79), contraste 5,6:1 (AA à partir de 4,5:1).
     Les ÉTIQUETTES n'en font pas partie : elles utilisent --pf-text (#4A3523). */
  --pf-muted:rgba(74,53,35,.78);
  --pf-error:#8C3A2B;
  --pf-font:'Poppins AP','Helvetica Neue',Arial,sans-serif;
  --pf-max:560px;

  box-sizing:border-box;
  width:100%;
  max-width:var(--pf-max);
  margin:0;
  color:var(--pf-text);
  font-family:var(--pf-font);
  text-align:left;
  /* les conteneurs Wix posent pointer-events:none sur leurs boîtes */
  pointer-events:auto;
}
.prose-form-block *,
.prose-form-block *::before,
.prose-form-block *::after{ box-sizing:border-box; }

/* variante contact.html : sépare le formulaire du bloc coordonnées */
.prose-form-block--contact{ margin-top:52px; }

/* les boîtes Wix qui accueillent le composant doivent pouvoir grandir */
[id^="comp-"]:has(> .prose-form-block),
[data-hook="Form-wrapper"]:has(.prose-form-block){
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* --------------------------------------------------------------------------
   2. Titre / intro facultatifs
   -------------------------------------------------------------------------- */
.prose-form-block .prose-form-title{
  margin:0 0 12px;
  padding:0;
  font-family:var(--pf-font);
  font-size:30px;
  font-weight:500;
  letter-spacing:.075em;
  line-height:1.25;
  text-transform:lowercase;
  color:var(--pf-text);
}
.prose-form-block .prose-form-intro{
  margin:0 0 30px;
  font-size:17px;
  font-weight:300;
  letter-spacing:.025em;
  line-height:1.6;
  color:var(--pf-muted);
}

/* --------------------------------------------------------------------------
   3. Grille des champs
   -------------------------------------------------------------------------- */
.prose-form{ display:block; margin:0; padding:0; border:0; }

.prose-form-grid{
  display:grid;
  /* auto-fit : une colonne dès que la place manque — la colonne de droite de
     la page d'accueil fait ~450 px, le bloc contact ~560 px, un téléphone
     ~315 px. Pas de media query à maintenir. */
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:24px 22px;
  margin:0;
}
.prose-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  min-width:0;
}
.prose-field--full{ grid-column:1 / -1; }

/* --------------------------------------------------------------------------
   4. Étiquettes (traitement « corps de texte » : 300 / .025em / casse naturelle)
   -------------------------------------------------------------------------- */
.prose-form .prose-label{
  display:block;
  margin:0;
  font-family:var(--pf-font);
  font-size:14px;
  font-weight:300;
  letter-spacing:.025em;
  line-height:1.4;
  text-transform:none;
  /* couleur de texte de la charte, pleine — une étiquette n'est pas du texte
     secondaire (contraste 10,6:1 sur #F7F5ED) */
  color:var(--pf-text);
}
.prose-form .prose-req{ color:var(--pf-text); }

/* --------------------------------------------------------------------------
   5. Champs — surfaces crème, filets 1 px, jamais de blanc pur
   -------------------------------------------------------------------------- */
.prose-form .prose-input,
.prose-form .prose-select,
.prose-form .prose-textarea{
  display:block;
  width:100%;
  margin:0;
  min-height:46px;            /* cible tactile ≥ 44 px */
  padding:11px 14px;
  font-family:var(--pf-font);
  font-size:16px;             /* jamais < 16 px : évite le zoom iOS */
  font-weight:300;
  letter-spacing:.025em;
  line-height:1.5;
  color:var(--pf-text);
  background-color:var(--pf-surface);
  background-image:none;
  border:1px solid var(--pf-line);
  border-radius:0;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.prose-form .prose-textarea{
  min-height:152px;
  padding-top:12px;
  resize:vertical;
}
.prose-form .prose-select{
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234A3523' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  cursor:pointer;
}
.prose-form .prose-input::placeholder,
.prose-form .prose-textarea::placeholder{ color:var(--pf-muted); opacity:1; }

.prose-form .prose-input:hover,
.prose-form .prose-select:hover,
.prose-form .prose-textarea:hover{ border-color:var(--pf-line-hover); }

/* focus bien visible : filet brun + halo accent (transparent outline conservé
   pour le mode contraste élevé de Windows) */
.prose-form .prose-input:focus,
.prose-form .prose-select:focus,
.prose-form .prose-textarea:focus{
  border-color:var(--pf-text);
  box-shadow:0 0 0 3px var(--pf-accent);
  outline:2px solid transparent;
  outline-offset:2px;
}
.prose-form .prose-input:-webkit-autofill{
  -webkit-text-fill-color:var(--pf-text);
  -webkit-box-shadow:0 0 0 60px var(--pf-surface) inset;
}

/* --------------------------------------------------------------------------
   6. Pot de miel (anti-pourriel)
   Le piège doit rester dans le DOM et dans les données envoyées — donc jamais
   `display:none` — mais ne doit jamais être vu, cliqué, ni atteint au clavier.

   L'étiquette ET la case sont neutralisées. Masquer la seule étiquette ne
   suffisait pas : la case gardait une boîte de 13×13 px à sa position normale
   dans le flux, à ~140 px de la boîte de 1×1 px de l'étiquette (le texte qui
   la précède est en `white-space:nowrap`). Elle n'était rattrapée que par le
   `overflow:hidden` / `clip` de l'étiquette — un masquage qui tenait à un seul
   fil, et que toute règle externe rétablissant `overflow:visible` sur les
   `label` aurait suffi à défaire.

   Spécificité (2,2,0) grâce à `:not(#_):not(#_)`, pour passer devant les
   règles !important globales de la couche enhance, qui plafonnent à (2,0,1)
   (`#site-root :is(…, label, …):not(#_)`), ainsi que devant ses règles
   mobiles sur `form input…`.
   -------------------------------------------------------------------------- */
.prose-form-block .prose-hp:not(#_):not(#_),
.prose-form-block .prose-hp:not(#_):not(#_) *{
  position:absolute !important;
  left:-9999px !important;          /* hors écran : aucune empreinte visuelle */
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:-1 !important;
  width:1px !important;
  height:1px !important;
  min-width:0 !important;
  min-height:0 !important;          /* bat le `min-height:44px !important` mobile */
  max-width:1px !important;
  max-height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  opacity:0 !important;
  transform:none !important;
  float:none !important;
  pointer-events:none !important;   /* jamais cliquable, même par accident */
  -webkit-appearance:none !important;
  appearance:none !important;       /* aucun widget natif à dessiner */
}

/* --------------------------------------------------------------------------
   7. Bouton d'envoi — traitement « titre » (500 / .075em / minuscules),
      dessin repris des boutons d'appel à l'action de la page d'accueil
   -------------------------------------------------------------------------- */
.prose-form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
  margin:30px 0 0;
}
.prose-form .prose-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 34px;
  margin:0;
  font-family:var(--pf-font);
  font-size:16px;
  font-weight:500;
  letter-spacing:.075em;
  line-height:1.2;
  text-transform:lowercase;
  color:var(--pf-text);
  background-color:transparent;
  border:1px solid var(--pf-accent);
  border-radius:300px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background-color .2s ease, border-color .2s ease;
}
.prose-form .prose-submit:hover{ background-color:var(--pf-accent); }
.prose-form .prose-submit:focus-visible{
  background-color:var(--pf-accent);
  outline:2px solid var(--pf-text);
  outline-offset:3px;
}
.prose-form .prose-submit[disabled],
.prose-form .prose-submit[aria-busy="true"]{
  opacity:.6;
  cursor:progress;
  background-color:transparent;
}
.prose-form .prose-form-note{
  margin:0;
  font-size:13px;
  font-weight:300;
  letter-spacing:.025em;
  line-height:1.5;
  color:var(--pf-muted);
}

/* --------------------------------------------------------------------------
   8. Zone de message (role="status" / aria-live="polite")
      Reste toujours dans le DOM pour que les lecteurs d'écran l'annoncent ;
      se réduit à zéro quand elle est vide.
   -------------------------------------------------------------------------- */
.prose-form .prose-form-status{
  margin:24px 0 0;
  padding:14px 16px 14px 18px;
  font-family:var(--pf-font);
  font-size:16px;
  font-weight:300;
  letter-spacing:.025em;
  line-height:1.55;
  color:var(--pf-text);
  background-color:var(--pf-surface);
  border:1px solid var(--pf-line);
  border-left:3px solid var(--pf-accent);
}
.prose-form .prose-form-status:empty{
  margin:0; padding:0; border:0;
}
.prose-form .prose-form-status a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.prose-form .prose-form-status--error{ border-left-color:var(--pf-error); }
.prose-form .prose-form-status:focus-visible{
  outline:2px solid var(--pf-text);
  outline-offset:2px;
}

.prose-form-block .prose-form-noscript{
  margin:24px 0 0;
  padding:14px 16px 14px 18px;
  font-size:16px;
  font-weight:300;
  letter-spacing:.025em;
  line-height:1.55;
  color:var(--pf-text);
  background-color:var(--pf-surface);
  border:1px solid var(--pf-line);
  border-left:3px solid var(--pf-accent);
}
.prose-form-block .prose-form-noscript a{ color:inherit; text-decoration:underline; }

/* --------------------------------------------------------------------------
   9. Réassertions face aux règles globales !important de omee-enhance.css
      (#site-root :is(…):not(#_) = spécificité (2,0,1) ; ici (2,2,0))
   -------------------------------------------------------------------------- */
.prose-form-block .prose-label:not(#_):not(#_),
.prose-form-block .prose-input:not(#_):not(#_),
.prose-form-block .prose-select:not(#_):not(#_),
.prose-form-block .prose-textarea:not(#_):not(#_),
.prose-form-block .prose-form-note:not(#_):not(#_),
.prose-form-block .prose-form-status:not(#_):not(#_),
.prose-form-block .prose-form-intro:not(#_):not(#_),
.prose-form-block .prose-form-noscript:not(#_):not(#_){
  font-family:var(--pf-font) !important;
  font-weight:300 !important;
  letter-spacing:.025em !important;
  text-transform:none !important;
}
.prose-form-block .prose-submit:not(#_):not(#_){
  font-family:var(--pf-font) !important;
  font-size:16px !important;
  font-weight:500 !important;
  letter-spacing:.075em !important;
  text-transform:lowercase !important;
  color:var(--pf-text) !important;
}
.prose-form-block .prose-form-title:not(#_):not(#_){
  font-family:var(--pf-font) !important;
  font-weight:500 !important;
  letter-spacing:.075em !important;
  text-transform:lowercase !important;
}
/* les champs gardent leur taille : la couche enhance force 16 px sur mobile,
   on l'assume aussi sur grand écran */
.prose-form-block .prose-input:not(#_):not(#_),
.prose-form-block .prose-select:not(#_):not(#_),
.prose-form-block .prose-textarea:not(#_):not(#_){
  font-size:16px !important;
  width:100% !important;
  box-sizing:border-box !important;
  color:var(--pf-text) !important;
  background-color:var(--pf-surface) !important;
}
.prose-form-block .prose-textarea:not(#_):not(#_){ min-height:152px !important; }

/* --------------------------------------------------------------------------
   10. Petits écrans
   -------------------------------------------------------------------------- */
@media screen and (max-width:1000px){
  .prose-form-block{ max-width:100%; }
  .prose-form-block--contact{ margin-top:38px; }
  .prose-form-block .prose-form-title{ font-size:26px; }
  .prose-form-block .prose-form-intro{ font-size:16px; margin-bottom:24px; }
  .prose-form-grid{ gap:20px 18px; }
  /* padding réduit : « lancer votre projet » tient sur une ligne à 375 px */
  .prose-form .prose-submit{ width:100%; min-height:50px; padding:12px 18px; }
  .prose-form-actions{ margin-top:26px; }

  /* Page d'accueil : la boîte Wix qui portait le formulaire mort est bridée à
     ~64 % de la largeur de l'écran sur téléphone (width:91.876% + marges de
     16 px dans un conteneur déjà en retrait de 30 px). On la laisse occuper
     toute la largeur disponible — uniquement quand elle contient ce
     composant, pour ne rien changer ailleurs. */
  #comp-mixpsibj:has(.prose-form-block){
    width:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .prose-form .prose-input,
  .prose-form .prose-select,
  .prose-form .prose-textarea,
  .prose-form .prose-submit{ transition:none; }
}