/*
  Procimex — styles propres à la page « Demande de devis ».

  Mise en page reprise du mockup Claude Design du 22/08, puis allégée le même
  jour : en-tête sombre pleine largeur, puis deux colonnes (formulaire à gauche,
  réassurance à droite). Rien après — la page s'arrête sur le formulaire.

  Deux parties dans ce fichier :
  1. l'en-tête sombre ;
  2. la grille formulaire + colonne de droite, dont l'habillage de Fluent Forms.

  Sur le point 2, voir procimex_fluentform_sans_peau() dans functions.php :
  la feuille « peau » du plugin (couleurs, boutons, champs) est retirée et
  remplacée par ce qui suit, mais sa feuille de structure est conservée —
  c'est elle qui tient les colonnes, l'état d'erreur et tous les types de
  champs que l'utilisateur pourrait ajouter plus tard depuis wp-admin.
  Ne styler ici que ce qui est réellement présent dans le formulaire.
*/

/* ---------- 1 · En-tête de page ---------- */
/* Fond sombre pleine largeur, sans photo : sur une page dont le seul but est
   d'être remplie, un visuel pleine hauteur repousse le formulaire sous la ligne
   de flottaison. Le contraste vient de la couleur, pas d'une image.
   --navy et non --navy-deep (valeur du mockup à l'origine) : c'est --navy
   qu'utilise le hero de l'accueil comme fond plein, --navy-deep ne sert
   ailleurs qu'à assombrir une photo en dégradé. Harmonisé le 22/08. */
.devis-tete {
  background: var(--navy);
  padding-top: 4rem; padding-bottom: 3.75rem;
  /* L'anneau de focus au clavier de base.css est un bleu foncé, invisible ici.
     Même correction que pour le pied de page. */
  --focus: var(--paper);
}
.devis-tete-texte { max-width: 47.5rem; }
.devis-tete .label { color: var(--accent-lt); }
/* Une marche en dessous du h1 de l'accueil : ce titre est long et sert d'entrée
   de formulaire, pas d'accroche de page d'accueil. */
/* text-wrap: balance plutôt que le retour à la ligne naturel : « punaises de
   lit » reste long sur toutes les largeurs, et sans balance le titre casse
   en lignes très inégales (repéré le 24/08). */
.devis-tete h1 { font-size: clamp(2.0625rem, 4vw, 3.25rem); color: var(--white); text-wrap: balance; }
.devis-tete .intro { max-width: 43.75rem; color: var(--mute-onDark); }

/* ---------- 2 · Formulaire et colonne de réassurance ---------- */
/* 1,55fr / 1fr : le formulaire garde une largeur de saisie confortable pendant
   que la colonne de droite reste assez large pour son bouton d'appel, qui ne
   doit jamais passer à la ligne. Le minmax(0, …) de gauche évite qu'un contenu
   large du plugin fasse déborder la colonne (comportement par défaut d'une
   grille : une piste ne rétrécit pas sous la taille de son contenu). */
.devis-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: 2.5rem; align-items: start;
}

/* Version courte du bloc de droite, réservée au mobile : masquée ici, montrée
   dans le palier @media plus bas. Sur cette largeur, .devis-urgence (dans
   l'aside) atterrit sous tout le formulaire — trop bas pour inciter à
   appeler avant que le visiteur commence à remplir la demande de devis.

   Badge navy compact + numéro souligné plutôt qu'un bouton plein ou un
   simple contour (les deux essayés, écartés) : le navy ne couvre qu'un
   petit carré (l'icône), pas tout le bloc — pas de redite avec l'en-tête
   sombre juste au-dessus, et plus travaillé qu'un rectangle à bordure fine. */
.devis-urgence-compact { display: none; }
.devis-urgence-compact a {
  display: flex; align-items: stretch; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.devis-urgence-compact .icone {
  flex: none; width: 3.875rem; background: var(--navy);
  display: flex; align-items: center; justify-content: center; color: var(--white);
}
.devis-urgence-compact .texte {
  flex: 1; min-width: 0; background: var(--white);
  padding: 0.875rem 1.125rem; display: flex; flex-direction: column;
  justify-content: center; gap: 0.25rem;
  transition: background .16s ease;
}
.devis-urgence-compact a:active .texte { background: var(--paper); }
.devis-urgence-compact .accroche {
  font-family: var(--font-head); font-weight: 600; font-size: 0.9688rem;
  color: var(--ink);
}
.devis-urgence-compact .numero {
  font-size: 0.9062rem; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px;
}

.devis-form {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 2.75rem 2.75rem 2.5rem;
  box-shadow: var(--shadow-card);

  /* Variables lues par la feuille de structure de Fluent Forms, qui étaient
     définies par la peau retirée. Sans elles, la bordure des champs en erreur
     n'aurait plus aucune couleur. Déclarées ici plutôt que sur :root — elles
     n'ont de sens qu'à l'intérieur du formulaire. */
  --fluentform-primary: var(--accent);
  --fluentform-secondary: var(--body-ink);
  --fluentform-danger: var(--danger);
  --fluentform-border-color: var(--border);
  --fluentform-border-radius: 4px;
}
/* Plus petit que le h2 de base.css (jusqu'à 40px) : c'est le titre d'une carte,
   pas d'une section de page. */
.devis-form h2 { font-size: 1.75rem; line-height: 1.18; }
.devis-form .devis-obligatoire { margin-top: 0.625rem; font-size: 1rem; color: var(--mute); }
.devis-form .devis-obligatoire span { color: var(--ink); }
.devis-form .fluentform { margin-top: 1.875rem; }

.devis-mention { margin-top: 1rem; font-size: 0.9062rem; line-height: 1.6; color: var(--mute); }

/* Une fois la demande envoyée, le plugin remplace le formulaire par son message
   de confirmation. Les deux textes que nous avons posés autour de lui — mention
   des champs obligatoires, mention RGPD — parleraient alors de champs qui ne
   sont plus affichés. Ils disparaissent avec le formulaire. */
.devis-form:has(.ff-message-success) .devis-hors-succes { display: none; }

.devis-form .ff-el-group { margin-bottom: 1.5rem; }
.devis-form .ff-el-input--label { margin-bottom: 0.5rem; }
.devis-form .ff-el-input--label label {
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
  line-height: 1.4; color: var(--ink);
}
/* Marqueur des champs obligatoires, dans la couleur du texte et non en rouge
   (défaut du plugin, qui le prend sur --fluentform-danger). Le rouge est le
   repère d'un champ mal rempli : le donner aussi à « ce champ est nécessaire »
   met deux messages différents sur le même signal. La phrase « Champs suivis
   de * obligatoires. » en haut de la carte utilise la même couleur.

   Les sélecteurs sont écrits aussi longs que ceux du plugin (quatre classes) :
   plus court, la règle perd sur la spécificité et l'astérisque reste rouge —
   vérifié en direct sur la page avant d'ajouter .asterisk-right/left. */
.devis-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.devis-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before { color: var(--ink); }

/* Les champs ne sont pas des <p> : sans famille de police explicite, ils
   retombent sur la police par défaut du navigateur et détonnent au milieu
   d'une page en Open Sans. */
.devis-form .ff-el-form-control {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--border); border-radius: 0.25rem;
  padding: 0.875rem 1rem; width: 100%; max-width: 100%;
  transition: border-color .16s ease;
}
.devis-form .ff-el-form-control::placeholder { color: var(--mute); opacity: 1; }
/* L'anneau de focus de base.css reste dessiné par-dessus : on ne touche qu'à
   la bordure, jamais à l'outline. */
.devis-form .ff-el-form-control:focus { border-color: var(--accent); }
.devis-form textarea.ff-el-form-control { min-height: 9.375rem; resize: vertical; }

/* Choix « Particulier / Syndic » : chaque option devient un bloc cliquable
   encadré plutôt qu'un rond suivi d'un mot. La cible tactile passe de la taille
   du texte à celle du cadre entier, et l'option retenue se voit au premier
   coup d'œil. La structure du plugin empile ces choix — d'où le passage du
   conteneur en flex. */
.devis-form .ff-el-input--content:has(.ff-el-form-check) {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.devis-form .ff-el-form-check { margin-bottom: 0; }
.devis-form .ff-el-form-check-label {
  display: inline-flex; align-items: center; gap: 0.625rem;
  margin-bottom: 0; padding: 0.8125rem 1.25rem; cursor: pointer;
  border: 2px solid var(--border); border-radius: 0.25rem; background: var(--white);
  font-size: 0.9688rem; line-height: 1.3; color: var(--body-ink);
  transition: border-color .16s ease, background .16s ease;
}
.devis-form .ff-el-form-check-label:hover { border-color: var(--accent); }
/* :has() plutôt que la classe .ff_item_selected du plugin : celle-ci n'est
   posée qu'au rendu de la page, pour l'option cochée par défaut. Elle ne suit
   pas les clics du visiteur — le cadre serait resté sur « Particulier ». */
.devis-form .ff-el-form-check:has(.ff-el-form-check-input:checked) .ff-el-form-check-label {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent-lt) 18%, var(--white));
  font-weight: 600; color: var(--ink);
}
/* La feuille de structure décale l'entrée de 2px vers le haut, calage prévu
   pour un alignement en ligne de texte. En flex, c'est le flex qui aligne. */
.devis-form .ff-el-form-check-input { top: 0; width: 1rem; height: 1rem; accent-color: var(--accent); }

/* Colonnes du formulaire : la feuille de structure les pose en flex avec un
   écart de 15px, resserré par rapport au reste de la page. */
.devis-form .ff-t-container { gap: 1.25rem; }

/* Bouton d'envoi : mêmes valeurs que .btn de base.css. Recopiées plutôt que
   partagées — le bouton est écrit par le plugin, on ne peut pas lui ajouter la
   classe .btn sans passer par les réglages du formulaire, donc sans sortir la
   mise en forme du code et la rendre modifiable par erreur depuis wp-admin. */
.devis-form .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9688rem; line-height: 1;
  padding: 1.0625rem 1.75rem; border: 2px solid transparent; border-radius: 0.25rem;
  background: var(--btn); color: var(--white); cursor: pointer;
  transition: background .16s ease;
}
/* --btn-hover et non --hl : sur ce bouton, --hl tombe à 4,1:1 avec du texte
   blanc en 15,5 px, sous le minimum de 4,5:1 (mesuré le 22/08, même correction
   que sur .btn dans base.css). */
.devis-form .ff-btn-submit:hover { background: var(--btn-hover); }
.devis-form .ff_submit_btn_wrapper { margin-top: 1.875rem; margin-bottom: 0; }

/* Erreurs. La feuille de structure pose déjà la couleur (via --fluentform-danger
   ci-dessus) ; sa taille de 12px est trop petite pour un message qu'on doit
   pouvoir lire du premier coup. */
.devis-form .ff-el-is-error .text-danger { font-size: 0.8438rem; line-height: 1.5; margin-top: 0.375rem; }
.devis-form .ff-errors-in-stack { margin-top: 1.125rem; }
.devis-form .ff-errors-in-stack .error { font-size: 0.9062rem; color: var(--danger); }

/* Message de confirmation : le formulaire disparaît et laisse ce bloc à sa
   place (réglage « masquer le formulaire », défini dans wp-admin). Il hérite
   du cadre blanc de .devis-form, il ne lui faut donc pas son propre cadre. */
.devis-form .ff-message-success {
  margin: 0; padding: 0; border: 0; box-shadow: none;
  font-size: 1.0938rem; line-height: 1.8; color: var(--ink);
}

/* ---------- Colonne de droite ---------- */
.devis-aside { display: grid; gap: 1.5rem; }

.devis-urgence {
  background: var(--navy); border-radius: var(--r); box-shadow: var(--shadow-card);
  padding: 2.375rem 2.125rem;
  --focus: var(--paper);
}
.devis-urgence .label { color: var(--accent-lt); margin-bottom: 0.875rem; }
.devis-urgence h2 { font-size: 1.625rem; line-height: 1.2; color: var(--white); }
/* Sans paragraphe entre le titre et le bouton (retiré, redondant avec le
   label et le titre) : le même écart que celui qui séparait le bouton du
   paragraphe garde la carte respirante. */
.devis-urgence .btn { margin-top: 1.625rem; }
.devis-urgence .devis-horaires { margin-top: 1.25rem; font-size: 0.9062rem; color: var(--mute-onDark); }

.devis-certifs {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-soft); padding: 1.75rem 1.875rem;
}
.devis-certifs h2 { font-size: 1.1875rem; line-height: 1.3; }
.devis-certifs ul { display: grid; gap: 0.625rem; margin-top: 0.875rem; }
.devis-certifs li {
  display: grid; grid-template-columns: 20px 1fr; gap: 0.625rem; align-items: start;
  font-size: 1rem; line-height: 1.6; color: var(--body-ink);
}
.devis-certifs svg { margin-top: 0.25rem; color: var(--accent); }

/* Sortie vers /certifications/. Même traitement que .cert-verif sur l'accueil
   et .methode-labels-verif sur « Notre méthode » : c'est le même lien, il doit
   se présenter pareil partout. Aligné à gauche ici et non centré — il suit une
   liste à puces alignée à gauche, le centrer le décrocherait du bloc. */
.devis-certifs-verif { margin: 1.25rem 0 0; }
.devis-certifs-verif a {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.125rem;
  transition: border-color .16s ease, color .16s ease;
}
.devis-certifs-verif a:hover { color: var(--btn-hover); border-bottom-color: var(--btn-hover); }

/* ---------- Responsive ---------- */
/* Le mockup ne couvrait que le desktop : les paliers ci-dessous sont propres au
   site, calés sur ceux de base.css (1040 = bascule du menu, 780 = mobile). */

/* Passage en une colonne : en dessous, la colonne de saisie descend sous les
   ~520px où les rangées à deux champs du formulaire deviennent inconfortables. */
@media (max-width: 980px) {
  .devis-grille { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  /* Les deux encarts de réassurance se mettent côte à côte tant qu'il y a la
     place : empilés, ils repousseraient la fin de page sans rien apporter. */
  .devis-aside { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}

@media (max-width: 780px) {
  .devis-tete { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  /* La taille fixée par le clamp() (33px, plancher atteint sur tout mobile)
     ne laisse que 4 mots par ligne pour ce titre plus long que la normale :
     réduite ici pour retomber sur 3 lignes mieux réparties avec le
     text-wrap: balance ci-dessus. */
  .devis-tete h1 { font-size: 1.75rem; }

  .devis-urgence-compact { display: block; }
  .devis-urgence-compact a { width: 100%; }

  .devis-form { padding: 1.625rem 1.375rem 1.875rem; }
  /* Les rangées à deux colonnes s'empilent. La largeur de chaque cellule est
     écrite en style en ligne par le plugin (flex-basis: 50%) : en colonne,
     cette valeur devient une hauteur, d'où le !important pour la neutraliser. */
  .devis-form .ff-t-container { flex-direction: column; gap: 0; }
  .devis-form .ff-t-cell { flex-basis: auto !important; }
  /* Bouton pleine largeur, comme les CTA du reste du site sur mobile. */
  .devis-form .ff-btn-submit { width: 100%; }
  /* Les deux options occupent chacune la moitié d'une ligne plutôt que de
     s'empiler : à cette largeur, un cadre pleine largeur ressemble à un champ. */
  .devis-form .ff-el-form-check { flex: 1 1 140px; }
  .devis-form .ff-el-form-check-label { width: 100%; }

  /* Retiré en mobile : redondant avec .devis-urgence-compact juste au-dessus
     du formulaire, qui porte déjà l'appel à appeler. */
  .devis-urgence { display: none; }
  .devis-certifs { padding: 1.5rem 1.375rem; }
}