/*
 * LCB Patrimoine, CSS propre a la page de contact (template-contact.php).
 * Chargee uniquement sur ce template (voir lcb_enqueue_assets() dans
 * functions.php), pour ne pas alourdir les autres pages avec du CSS qui ne
 * les concerne pas. Meme workflow append-only que lcb-patrimoine-layout.css :
 * ne jamais reecrire ce fichier en entier, ajouter un nouveau bloc a la fin.
 *
 * Les variables de marque (:root) vivent dans style.css. Les classes
 * partagees avec le reste du site (.section, .eyebrow, .btn, .reveal,
 * .cred-item...) vivent dans lcb-patrimoine-layout.css et sont reutilisees
 * ici telles quelles.
 *
 * Changelog
 * ----------
 * 1.0.0 - Creation de la page de contact : hero avec les 3 moyens de
 *         contact (telephone, email, visio/deplacement), formulaire Gravity
 *         Forms, bandeau de confiance (certifications). Gravity Forms peut
 *         changer legerement de balisage selon la version/le theme utilise
 *         (Legacy vs Orbital) : le style cible autant que possible les
 *         balises natives (input/select/textarea) plutot que des classes
 *         internes a Gravity Forms, pour rester robuste dans les deux cas.
 * 1.0.1 - Sur le vrai formulaire (theme Gravity Forms "Orbital", pas
 *         "Legacy"), plusieurs elements restaient dans les couleurs par
 *         defaut de Gravity Forms (bleu) : bouton d'envoi, case a cocher.
 *         Orbital pilote ses couleurs via des variables CSS dediees plutot
 *         que par simple cascade de classes, d'ou le fait que les regles
 *         1.0.0 (classes/balises seules) ne suffisaient pas a les
 *         surcharger. On ajoute la surcharge de ces variables, en plus d'un
 *         renfort en !important sur les regles existantes. Ajout aussi du
 *         style des champs prenom/nom separes et du champ fichier (la
 *         version reelle du formulaire les utilise, pas prevus dans le
 *         brouillon initial), et de l'embleme photo de l'aile de cygne en
 *         fond de la section formulaire (remplace le SVG de filigrane
 *         utilise sur la FAQ de l'accueil, meme principe de mise en oeuvre).
 * 1.0.2 - Sur le site en production, seule la couleur du bouton (deja en
 *         !important depuis la 1.0.1) s'est effectivement appliquee ; tout
 *         le reste (etiquettes, fond des champs, case a cocher, aile de
 *         cygne) est reste identique au rendu par defaut de Gravity Forms.
 *         Cause la plus probable : le CSS propre au plugin Gravity Forms
 *         (et le bloc de variables par defaut du theme Orbital) est imprime
 *         apres notre feuille, et gagne donc tous les departages de
 *         specificite egale qui ne sont pas en !important. On passe donc
 *         l'ensemble des regles de style des champs, ainsi que les
 *         variables Orbital elles-memes (les proprietes CSS personnalisees
 *         acceptent aussi !important), sur le meme principe que ce qui
 *         avait deja ete fait pour le bouton. Ajouts/corrections : (a) les
 *         3 cartes moyens de contact sortent du hero pour vivre dans leur
 *         propre bloc entre le hero et le formulaire, avec une marge
 *         negative qui les fait
 *         chevaucher les deux fonds (effet "a cheval" demande sur la
 *         maquette) - fond des cartes passe en vert plein pour rester lisible
 *         quel que soit le fond derriere elles ; (b) l'aile de cygne est
 *         deplacee dans .contact-form-panel, centree derriere les champs du
 *         formulaire plutot que dans un coin de la section (elle etait
 *         positionnee hors du cadre visible du panneau sur grand ecran).
 *         L'opacite est aussi remontee nettement : la photo est un plumage
 *         blanc sur fond blanc, l'opacite de 1.0.1 la rendait quasi
 *         invisible meme bien positionnee. Un filtre de contraste accentue
 *         legerement le trace des plumes pour qu'elle se lise comme motif de
 *         fond sans devenir un rectangle visible (le blend-mode "multiply"
 *         est conserve : il fait disparaitre les zones blanches de la photo,
 *         qui n'auraient sinon montre un bord rectangulaire net).
 * 1.0.3 - Retours apres verification sur le site en production : (a) fond
 *         plein des cartes juge un peu terne, ajout d'un degrade vers le
 *         noir sur leur moitie basse ; (b) le panneau de formulaire passe de
 *         760px a 1080px de large pour occuper la meme largeur que les 3
 *         cartes moyens de contact ; (c) l'aile de cygne restait invisible
 *         sur le site en production et ne correspondait pas a la maquette
 *         fournie (elle doit traverser tout l'ecran, partir du bord droit et
 *         depasser le bord gauche du panneau de formulaire) : repositionnee
 *         en consequence, avec #contact-form (pleine largeur d'ecran) comme
 *         cadre de rognage plutot que le panneau lui-meme, trop etroit pour
 *         laisser deborder l'aile des deux cotes. Si elle reste invisible
 *         apres ce correctif, le plus probable est un probleme de
 *         chargement du fichier (voir le message qui accompagne ce fichier
 *         pour la marche a suivre) plutot qu'un reglage CSS ; (d) lien vers
 *         la FAQ change en "les questions frequentes" (dans
 *         template-contact.php).
 * 1.0.4 - Retour d'Oriane apres verification sur le site reel : l'aile de
 *         cygne s'affiche bien, mais avec deux effets non demandes (une
 *         legere rotation et un filtre de contraste/luminosite qui la
 *         teinte), et elle ne s'etend pas sur toute la largeur de l'ecran
 *         comme sur la maquette. Cause de ce dernier point : la 1.0.3 visait
 *         #contact-form (pleine largeur d'ecran) comme repere de
 *         positionnement, mais l'image est en realite positionnee par
 *         rapport a .contact-form-panel (son parent direct, deja en
 *         position:relative et large de 1080px seulement) : c'est lui, pas
 *         #contact-form, qui sert de referentiel pour right/width en
 *         position absolute, etant le parent positionne le plus proche dans
 *         l'arborescence. On corrige avec la technique "full bleed"
 *         (left:50% + margin-left:-50vw + width:100vw), qui etend l'element
 *         sur toute la largeur de la fenetre quelle que soit la largeur de
 *         son parent positionne, du moment que ce parent reste lui-meme
 *         centre horizontalement sur la page (c'est le cas ici, via les
 *         margin:0 auto en cascade jusqu'a .contact-form-panel). #contact-form
 *         garde son overflow:hidden pour rogner le debordement horizontal.
 *         Rotation et filtre retires : l'image reste dans son rendu
 *         d'origine, seuls opacity et mix-blend-mode (necessaires pour faire
 *         disparaitre le fond blanc de la photo) sont conserves.
 * 1.0.5 - (a) La 1.0.4 n'a pas suffi : Oriane a constate que l'aile
 *         n'atteignait toujours pas le bord droit de l'ecran. Cette fois
 *         verifie par un rendu reel (harnais local avec Playwright, DOM et
 *         CSS reels du fichier) avant de relivrer, plutot que par
 *         relecture du CSS seule. Cause trouvee : la regle globale
 *         img{max-width:100%} (lcb-patrimoine-layout.css) plafonne toute
 *         image a la largeur de son bloc conteneur - ici .contact-form-
 *         panel, 1080px - quelle que soit la valeur de "width" fixee par
 *         ailleurs (max-width l'emporte toujours sur width dans le calcul
 *         de la largeur finale). Le width:100vw de la 1.0.4 etait donc
 *         silencieusement ramene a 1080px. On leve ce plafond sur
 *         .contact-wing-emblem uniquement. Verifie par mesure programmatique
 *         (getBoundingClientRect) sur plusieurs largeurs d'ecran : l'image
 *         touche desormais 0 et 100% de la largeur de la fenetre.
 *         (b) Legere transparence des champs du formulaire, sur demande
 *         d'Oriane, pour laisser deviner l'aile en fond. Le fond des champs
 *         est deja en !important depuis la 1.0.2 (necessaire pour gagner
 *         face au CSS de Gravity Forms) : on le reprend avec la meme
 *         priorite, --pale-tint converti en rgba (memes valeurs que la
 *         variable, #F4F8F6) pour pouvoir y ajouter une opacite. L'etat
 *         focus (fond blanc) reste plein pour garder une bonne lisibilite
 *         pendant la saisie.
 * 1.0.6 - (a) Retour d'Oriane : l'aile debordait au-dessus de
 *         .contact-form-panel et passait derriere l'eyebrow/le h2/le
 *         paragraphe d'introduction du bloc formulaire. Cause : le
 *         centrage vertical (top:50% + translateY(-50%)) herite depuis la
 *         1.0.1 deborde des deux cotes des que la hauteur reelle de
 *         l'image (bien plus grande maintenant qu'elle fait toute la
 *         largeur de l'ecran, cf. 1.0.5) depasse celle du panneau. On
 *         aligne desormais le haut de l'image sur le haut du panneau
 *         (top:0) : le surplus de hauteur ne deborde plus que vers le bas.
 *         (b) Corrige au passage un bug introduit en 1.0.4 et jamais
 *         teste sur les largeurs mobiles a l'epoque : le passage au
 *         positionnement horizontal "full bleed" (left:50% +
 *         margin-left:-50vw) rendait le transform:translate(-50%,-50%)
 *         herite du reglage mobile d'origine redondant ET incorrect (il
 *         decalait l'image une deuxieme fois de -50% en largeur). Verifie
 *         par mesure programmatique (Playwright) sur mobile et desktop
 *         apres correctif.
 *         (c) Titres des champs du formulaire (NOM, E-MAIL, TELEPHONE,
 *         MESSAGE, FICHIER...) legerement agrandis, a la demande
 *         d'Oriane.
 * 1.0.7 - Test demande par Oriane, inspire d'une maquette de reference
 *         (seul le principe est repris : le fond, le contour, l'arrondi
 *         et la hauteur des champs - les couleurs de cette reference ne
 *         correspondent pas a la charte et ne sont pas reprises). (a)
 *         Champs (texte, email, tel, select, textarea, fichier) : fond
 *         blanc, contour pointille (2px, vert signature), coins arrondis
 *         (8px), un peu plus hauts (padding 18px). Au focus, le contour
 *         passe en trait plein pour bien distinguer le champ actif du
 *         reste, meme couleur. (b) Bouton "Envoyer" agrandi (padding et
 *         taille de police en hausse). (c) Titres des champs (NOM,
 *         E-MAIL, TELEPHONE, MESSAGE, FICHIER) : police Playfair au lieu
 *         du sans-serif capitales, et on retire la mise en majuscules
 *         forcee par le CSS - le texte de ces labels est deja saisi par
 *         Oriane en minuscules avec majuscule initiale dans Gravity
 *         Forms, seule la transformation CSS l'ecrasait jusqu'ici.
 *         Letter-spacing remis a la normale (la valeur large de la 1.0.0
 *         etait pensee pour la lecture en capitales, elle ne convient
 *         plus a du texte en casse normale). Les sous-labels Prenom/Nom
 *         et le libelle de la case RGPD ont leurs propres regles, plus
 *         specifiques, donc non affectes par ce changement. (d) Legende
 *         "« * » indique les champs necessaires" masquee.
 * 1.0.8 - Retours d'Oriane sur le test de la 1.0.7 : (a) le pointille
 *         (border-style:dotted, des points ronds) ne correspond pas a la
 *         maquette de reference, qui montre un trait discontinu (des
 *         tirets) : passage a border-style:dashed, et le trait est
 *         affine (2px -> 1.5px) pour rester fin comme sur la reference.
 *         (b) La hauteur des champs n'avait pas augmente malgre le
 *         padding de la 1.0.7. Hypothese la plus probable, dans la
 *         continuite du constat deja fait en 1.0.2 sur ce meme fichier :
 *         le theme Orbital de Gravity Forms impose probablement sa
 *         propre hauteur aux champs (via ses variables de theme ou une
 *         regle chargee apres la notre), qui l'emporte sur le padding
 *         tant qu'aucune hauteur n'est fixee explicitement de notre cote.
 *         On force height:auto et un min-height genereux, en !important,
 *         pour que le padding puisse enfin agrandir la case visuellement.
 *         Cette hypothese n'a pas pu etre verifiee dans le harnais local
 *         (qui ne reproduit pas le vrai CSS de Gravity Forms) : a
 *         reconfirmer sur le site reel. (c) Taille des titres des champs
 *         remontee de 12px a 15px (trop petite en Playfair, une police a
 *         l'oeil plus fin qu'un sans-serif a la meme taille). (d) Case
 *         fichier : le texte interne ("aucun fichier choisi") n'etait
 *         plus centre verticalement une fois le padding de la 1.0.7
 *         applique - comportement connu des input[type=file] natifs, qui
 *         ne redistribuent pas leur contenu interne comme du texte
 *         normal. display:flex + align-items:center sur ce champ
 *         specifiquement centre son contenu quel que soit le padding.
 * 1.0.9 - Retour d'Oriane : la 1.0.8 est allee un peu fort sur la hauteur
 *         des champs nom/email/telephone/fichier (min-height:56px),
 *         reduite d'environ un sixieme (56px -> 47px). Le champ message
 *         (textarea, min-height:150px) n'est pas concerne, seuls les
 *         champs cites ont ete signales trop hauts. Bouton "Envoyer" :
 *         texte agrandi (13px -> 15px).
 * 1.0.10 - (a) Oriane signale que la hauteur des champs n'a en fait pas
 *          bouge du tout entre la 1.0.8 et la 1.0.9, alors que le
 *          min-height avait bien change (56px -> 47px) : ca pointe vers
 *          min-height qui n'est pas le vrai levier de la hauteur visible
 *          ici. Hypothese revisee : la hauteur reelle des champs vient du
 *          padding (18px vertical depuis la 1.0.7) combine au contenu, et
 *          reste superieure au min-height fixe quelle que soit sa valeur
 *          - le min-height agit alors comme un simple plancher inactif,
 *          sans effet visible. On reduit cette fois le padding vertical
 *          directement (18px -> 10px), en gardant un min-height plus bas
 *          en filet de securite. Comme la 1.0.8, cette hypothese n'a pas
 *          pu etre verifiee dans le harnais local (pas le vrai CSS de
 *          Gravity Forms) : a reconfirmer sur le site reel, avec cette
 *          fois une vraie difference visible attendue.
 *          (b) Cartes des moyens de contact rallongees en hauteur (le
 *          retrait du contact-method-title en 1.0.7 les avait raccourcies
 *          plus qu'Oriane ne le voulait) : padding vertical augmente. Le
 *          label (PAR TELEPHONE, PAR EMAIL, EN VISIO) est agrandi et
 *          recoit un petit trait de separation en dessous (pseudo-element
 *          ::after plutot qu'un border, pour un trait court centre plutot
 *          qu'un trait pleine largeur). La valeur (numero, email, "Reserver
 *          un echange") ne se distingue plus par un soulignement mais par
 *          la couleur d'accent, la graisse et une taille legerement plus
 *          grande.
 *          (c) Largeur des paragraphes (hero et bloc formulaire) elargie
 *          (600px -> 720px, reste inferieure aux 1080px des cartes et du
 *          formulaire, comme demande). Le H1 et le retrait du point final
 *          du H2 sont des modifs de texte, faites dans template-contact.php.
 *          (d) Bouton "Envoyer" : text-transform:uppercase remonte en
 *          !important - la regle de base (1.0.0) ne l'etait pas encore,
 *          probablement ecrasee par le CSS de Gravity Forms comme le
 *          reste des reglages non proteges sur ce fichier.
 * 1.0.11 - Cartes des moyens de contact : espace avant/apres le trait de
 *          separation sous le label augmente (marge du label doublee,
 *          14px -> 28px, trait recentre dans cet espace), coins legerement
 *          arrondis (3px -> 10px). La valeur (numero, email, "Reserver un
 *          echange") repasse en blanc (le vert-pale de la 1.0.10 est
 *          retire) et se distingue desormais par une fleche design (le
 *          caractere typographique "›", plus raffiné que "> <") avant le
 *          texte plutot que par un soulignement, avec un leger effet au
 *          survol.
 */

/* ---------- HERO CONTACT ---------- */
#contact-hero{
  min-height:auto;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 32% 30%, #067064 0%, #04473f 28%, #011c18 58%, #000403 100%);
  color:var(--blanc);
  padding-top:160px;padding-bottom:90px;
}
#contact-hero .watermark{
  position:absolute;left:-11%;top:38%;transform:translateY(-50%);
  width:42vw;max-width:620px;opacity:0.05;pointer-events:none;
}
.contact-hero-head{position:relative;z-index:2;max-width:720px;margin:0 auto 100px;text-align:center;}
.contact-hero-head .eyebrow{margin-bottom:22px;}
.contact-hero-head h1{
  font-size:clamp(2.1rem,4vw,3.1rem);color:var(--blanc);
  line-height:1.16;margin-bottom:24px;letter-spacing:0.005em;
}
.contact-hero-head .sub{
  font-size:clamp(1rem,1.3vw,1.14rem);color:rgba(255,255,255,0.82);
  font-style:italic;max-width:600px;margin:0 auto;
}

/* Bloc intercale entre le hero et la section formulaire (voir template-contact.php) :
   les cartes ne sont enfants d'aucune des deux sections, ce qui leur permet de
   chevaucher visuellement la limite entre le fond fonce du hero et le fond
   blanc du formulaire (effet "a cheval" demande). Une marge negative les tire
   vers le haut, dans l'espace du padding-bottom du hero ; comme cet element
   n'a pas overflow:hidden (contrairement a #contact-hero et #contact-form,
   qui en ont besoin pour rogner leurs propres filigranes), rien ne vient
   rogner le debordement. */
.contact-methods-straddle{
  position:relative;z-index:3;
  margin-top:-150px;
  padding:0 8vw;
}
.contact-methods{
  display:grid;grid-template-columns:repeat(3,1fr);gap:min(4vw,44px);
  max-width:1080px;margin:0 auto;
}
.contact-method{
  text-align:center;padding:36px 26px;border-radius:3px;
  background:linear-gradient(180deg, var(--vert-lcb) 0%, var(--vert-lcb) 45%, #01100e 100%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 24px 50px rgba(2,42,37,0.28);
  display:flex;flex-direction:column;align-items:center;
  transition:box-shadow .3s ease, transform .3s ease;
}
.contact-method:hover{box-shadow:0 30px 60px rgba(2,42,37,0.34);transform:translateY(-3px);}
.contact-method-icon{
  width:56px;height:56px;border-radius:50%;margin-bottom:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--vert-pale);
  border:1px solid rgba(255,255,255,0.28);
}
.contact-method-icon svg{width:23px;height:23px;}
.contact-method-label{
  font-family:var(--sans-caps);font-weight:600;font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--vert-pale);margin-bottom:14px;
}
.contact-method-title{
  font-family:var(--serif-display);font-style:italic;font-weight:500;font-size:1.15rem;
  color:var(--blanc);margin-bottom:10px;
}
.contact-method p{font-size:.92rem;color:rgba(255,255,255,0.68);margin-bottom:20px;}
.contact-method-value{
  font-family:var(--sans-caps);font-size:12px;letter-spacing:0.06em;
  color:var(--blanc);padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,0.4);
  transition:border-color .25s ease, color .25s ease;
}
.contact-method-value:hover{color:var(--vert-pale);border-color:var(--vert-pale);}

/* ---------- FORMULAIRE ---------- */
#contact-form{background:var(--blanc);}
#contact-form .head{max-width:680px;margin:0 auto 60px;text-align:center;}
#contact-form .head h2{font-size:clamp(1.8rem,2.8vw,2.4rem);margin:14px 0 16px;}
#contact-form .head p{color:var(--gris-fonction);font-size:1.05rem;max-width:600px;margin:0 auto;}

.contact-form-panel{max-width:1080px;margin:0 auto;}
.contact-form-placeholder{
  padding:40px;text-align:center;border:1px dashed var(--filet);border-radius:3px;
  color:var(--gris-fonction);font-size:.95rem;
}

/* Gravity Forms : on cible en priorite les balises natives (input, select,
   textarea) plutot que les classes internes de Gravity Forms, qui peuvent
   varier legerement selon la version/le theme actif (Legacy ou Orbital).
   Les classes de structure ci-dessous (gform_fields, gfield, gform_footer,
   gform_button) sont en revanche stables depuis tres longtemps et ciblees
   sans risque. */
.contact-form-panel .gform_fields{
  list-style:none;display:flex;flex-direction:column;gap:24px;
}
.contact-form-panel .gfield{list-style:none;}
.contact-form-panel .gfield_label,
.contact-form-panel label{
  display:block;font-family:var(--sans-caps);font-size:11px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--vert-lcb);margin-bottom:8px;
}
.contact-form-panel .gfield_required{color:var(--vert-signature);margin-left:3px;}
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel textarea{
  width:100%;padding:14px 16px;border:1px solid var(--filet);border-radius:2px;
  font-family:var(--serif-labeur);font-size:1rem;color:var(--noir-encre);
  background:var(--pale-tint);transition:border-color .25s ease, background-color .25s ease;
}
.contact-form-panel textarea{min-height:120px;resize:vertical;}
.contact-form-panel input:focus,
.contact-form-panel select:focus,
.contact-form-panel textarea:focus{
  outline:none;border-color:var(--vert-signature);background:var(--blanc);
}
.contact-form-panel .ginput_container_checkbox label,
.contact-form-panel .gfield--type-consent label{
  display:inline;text-transform:none;letter-spacing:normal;font-family:var(--serif-labeur);
  font-size:.88rem;font-weight:400;color:var(--gris-fonction);margin:0;
}
.contact-form-panel .ginput_container_checkbox input[type="checkbox"],
.contact-form-panel .gfield--type-consent input[type="checkbox"]{
  margin-right:8px;
}
.contact-form-panel .gform_footer,
.contact-form-panel .gform_page_footer{
  margin-top:12px;padding:0;border:none;
}
.contact-form-panel .gform_button,
.contact-form-panel input[type="submit"]{
  font-family:var(--sans-caps);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  padding:16px 34px;border-radius:2px;border:1px solid var(--vert-lcb);
  background:var(--vert-lcb);color:var(--blanc);cursor:pointer;
  transition:background-color .3s ease, border-color .3s ease;
}
.contact-form-panel .gform_button:hover,
.contact-form-panel input[type="submit"]:hover{
  background:var(--vert-signature);border-color:var(--vert-signature);
}
.contact-form-panel .validation_error{
  color:#a33;font-size:.92rem;margin-bottom:20px;border:1px solid #e0b8b8;
  background:#fdf3f3;padding:14px 18px;border-radius:2px;
}
.contact-form-panel .gfield_validation_message,
.contact-form-panel .validation_message{
  color:#a33;font-size:.85rem;margin-top:6px;
}
.contact-form-panel .gform_confirmation_message{
  text-align:center;font-family:var(--serif-display);font-style:italic;
  color:var(--vert-lcb);font-size:1.15rem;padding:30px 0;
}

/* ---------- BANDEAU DE CONFIANCE ---------- */
.contact-trust{max-width:760px;margin:70px auto 0;padding-top:50px;border-top:1px solid var(--filet);text-align:center;}
.contact-trust .eyebrow{display:block;margin-bottom:26px;}
.contact-trust-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:34px;margin-bottom:34px;
}
.contact-trust-row .cred-item{
  display:flex;flex-direction:column;gap:6px;padding-left:16px;border-left:1px solid var(--vert-lcb);
  text-align:left;
}
.contact-trust-row .cred-label{font-family:var(--sans-caps);font-size:11px;letter-spacing:0.09em;color:var(--vert-lcb);}
.contact-trust-row .cred-logo{display:inline-flex;align-items:center;}
.contact-trust-row .cred-logo img{
  height:22px;width:auto;display:block;filter:brightness(0) invert(40%);transition:filter .4s ease;
}
.contact-trust-row .cred-logo:hover img{filter:none;}
.contact-faq-link{font-size:.92rem;color:var(--gris-fonction);}
.contact-faq-link a{color:var(--vert-lcb);border-bottom:1px solid var(--vert-lcb);transition:opacity .25s ease;}
.contact-faq-link a:hover{opacity:0.7;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  #contact-hero{padding-top:200px;}
  #contact-hero .watermark{
    left:50%;top:auto;bottom:-4%;
    transform:translateX(-50%);
    width:70vw;max-width:420px;opacity:0.04;
  }
  .contact-methods-straddle{margin-top:-36px;padding:0 24px;}
  .contact-methods{grid-template-columns:1fr;gap:22px;}
  .contact-trust-row{flex-direction:column;align-items:center;gap:20px;}
  .contact-trust-row .cred-item{text-align:center;padding-left:0;border-left:none;}
}

/* ==================================================================
   1.0.1 - Surcharge du theme Orbital, champs prenom/nom et fichier,
   embleme photo (aile de cygne) en fond du formulaire
   ================================================================== */

/* Gravity Forms (theme "Orbital") pilote ses couleurs via ces variables CSS,
   posees sur le wrapper du formulaire : c'est la methode recommandee par
   Gravity Forms pour surcharger ses couleurs par defaut (plutot que de
   forcer chaque element un par un, fragile si leur balisage interne change
   d'une version a l'autre). On les redefinit ici avec nos propres couleurs
   de marque. */
#contact-form .gform_wrapper{
  --gform-theme-color-primary:var(--vert-lcb) !important;
  --gform-theme-color-primary-contrast:var(--blanc) !important;
  --gform-theme-color-secondary:var(--vert-signature) !important;
  --gform-theme-color-secondary-contrast:var(--blanc) !important;
  --gform-theme-color-outline:var(--vert-signature) !important;
  --gform-theme-button-background-color-primary:var(--vert-lcb) !important;
  --gform-theme-button-background-color-primary-hover:var(--vert-signature) !important;
  --gform-theme-button-text-color-primary:var(--blanc) !important;
  --gform-theme-button-border-radius:2px !important;
}

/* Renfort en !important : au cas ou une regle de couleur par defaut de
   Gravity Forms soit elle-meme deja marquee !important (ce que les variables
   CSS ci-dessus ne peuvent pas surcharger). */
.contact-form-panel .gform_button,
.contact-form-panel input[type="submit"]{
  background:var(--vert-lcb) !important;border-color:var(--vert-lcb) !important;color:var(--blanc) !important;
}
.contact-form-panel .gform_button:hover,
.contact-form-panel input[type="submit"]:hover{
  background:var(--vert-signature) !important;border-color:var(--vert-signature) !important;
}

/* Cases a cocher (RGPD, etc.) : sans cette ligne, la case prend la couleur
   d'accentuation par defaut du navigateur (souvent bleue) plutot que le vert
   de la marque. */
.contact-form-panel input[type="checkbox"],
.contact-form-panel input[type="radio"]{
  accent-color:var(--vert-lcb) !important;
  width:16px;height:16px;flex-shrink:0;
}

/* Champs prenom/nom Gravity Forms (name field, sous-champs cote a cote). */
.contact-form-panel .ginput_complex{display:flex !important;gap:20px;flex-wrap:wrap;}
.contact-form-panel .ginput_complex > span{flex:1 1 200px;}
.contact-form-panel .ginput_complex label,
.contact-form-panel .gfield_label + .gform_fileupload_rules,
.contact-form-panel .ginput_complex .gfield_label{
  text-transform:none !important;letter-spacing:normal !important;font-weight:400 !important;
  font-family:var(--serif-labeur) !important;font-size:.82rem !important;color:var(--gris-fonction) !important;
  margin-top:6px;margin-bottom:0;
}

/* Champ fichier. */
.contact-form-panel input[type="file"]{
  width:100%;padding:12px 14px;border:1px dashed var(--filet) !important;border-radius:2px;
  background:var(--pale-tint) !important;font-family:var(--serif-labeur);font-size:.92rem;
}
.contact-form-panel .gform_fileupload_rules{
  font-size:.8rem;color:var(--gris-fonction);margin-top:6px;
}

/* Renfort general : sur le site en production, le CSS propre de Gravity
   Forms s'est avere imprime apres cette feuille, ce qui lui fait gagner tous
   les departages de specificite egale qui ne sont pas en !important (seul le
   bouton, deja en !important depuis la 1.0.1, s'appliquait correctement). On
   renforce ici les regles 1.0.0 les plus visibles (etiquettes, fond des
   champs texte) avec le meme procede plutot que de parier sur l'ordre de
   chargement, qui ne depend pas de nous. */
.contact-form-panel .gfield_label,
.contact-form-panel label{
  font-family:var(--sans-caps) !important;font-size:11px !important;font-weight:600 !important;
  letter-spacing:0.08em !important;text-transform:uppercase !important;color:var(--vert-lcb) !important;
}
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel textarea{
  border:1px solid var(--filet) !important;border-radius:2px !important;
  font-family:var(--serif-labeur) !important;color:var(--noir-encre) !important;
  background:var(--pale-tint) !important;
}
.contact-form-panel input:focus,
.contact-form-panel select:focus,
.contact-form-panel textarea:focus{
  border-color:var(--vert-signature) !important;background:var(--blanc) !important;
}
.contact-form-panel .ginput_container_checkbox label,
.contact-form-panel .gfield--type-consent label{
  text-transform:none !important;letter-spacing:normal !important;font-weight:400 !important;
  font-family:var(--serif-labeur) !important;font-size:.88rem !important;color:var(--gris-fonction) !important;
}

/* Embleme photo (aile de cygne) en fond du formulaire, sur toute la largeur
   de l'ecran : l'aile part du bord droit et sa pointe depasse le bord gauche
   du panneau de formulaire, comme sur la maquette fournie. Le panneau reste
   le repere vertical (l'aile se centre sur la hauteur des champs plutot que
   sur toute la section, qui inclut aussi le titre et le bandeau de
   confiance), mais le debordement horizontal n'est plus rogne par le
   panneau lui-meme (trop etroit pour laisser deborder l'aile des deux
   cotes) : c'est #contact-form, qui fait toute la largeur de l'ecran, qui
   porte l'overflow hidden. */
.contact-form-panel{position:relative;}
.contact-form-panel .gform_wrapper,
.contact-form-panel .contact-form-placeholder{position:relative;z-index:1;}
#contact-form{position:relative;overflow:hidden;}
.contact-wing-emblem{
  position:absolute;top:50%;right:-6%;z-index:0;pointer-events:none;
  transform:translateY(-50%) rotate(-3deg);
  width:200%;height:auto;
  opacity:0.55;mix-blend-mode:multiply;filter:contrast(1.6) brightness(0.88);
}

@media (max-width:900px){
  .contact-wing-emblem{
    right:auto;left:50%;
    transform:translate(-50%,-50%) rotate(-6deg);
    width:220%;opacity:0.35;
  }
}

/* ==================================================================
   1.0.4 - Aile de cygne : suppression de la rotation et du filtre de
   contraste/luminosite (non demandes), passage en pleine largeur d'ecran
   ================================================================== */

/* Positionnement "full bleed" : le parent positionne le plus proche de
   .contact-wing-emblem est .contact-form-panel (1080px max), pas
   #contact-form comme visait la 1.0.3. left:50% + margin-left:-50vw +
   width:100vw etend l'image sur toute la largeur de la fenetre quel que
   soit la largeur du parent positionne, tant que ce parent reste centre
   horizontalement sur la page (c'est le cas ici). #contact-form garde son
   overflow:hidden pour rogner le debordement. Rotation et filtre retires :
   l'image reste dans son rendu d'origine ; opacity et mix-blend-mode sont
   conserves (necessaires pour faire disparaitre le fond blanc de la photo,
   pas une modification du rendu de l'aile elle-meme). */
.contact-wing-emblem{
  right:auto;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  transform:translateY(-50%);
  filter:none;
}
@media (max-width:900px){
  .contact-wing-emblem{
    left:50%;
    width:100vw;
    margin-left:-50vw;
    transform:translate(-50%,-50%);
  }
}

/* ==================================================================
   1.0.5 - Aile de cygne toujours pas en plein ecran malgre la 1.0.4,
   transparence des champs du formulaire
   ================================================================== */

/* (a) La regle globale img{max-width:100%} plafonnait la largeur reelle
   de l'image a celle de .contact-form-panel (1080px), quel que soit le
   width:100vw fixe par la 1.0.4 : max-width l'emporte toujours sur width.
   On leve ce plafond specifiquement ici. */
.contact-wing-emblem{max-width:none;}
@media (max-width:900px){
  .contact-wing-emblem{max-width:none;}
}

/* (b) Legere transparence des champs du formulaire pour laisser deviner
   l'aile en fond. Le fond des champs est deja en !important depuis la
   1.0.2 (necessaire pour gagner face au CSS de Gravity Forms) : on le
   reprend ici avec la meme priorite. --pale-tint (#F4F8F6) convertie en
   rgba pour pouvoir y ajouter une opacite (une variable CSS seule ne
   permet pas d'ajouter une opacite a la volee). L'etat focus (fond blanc)
   reste plein pour garder une bonne lisibilite pendant la saisie. */
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel textarea,
.contact-form-panel input[type="file"]{
  background:rgba(244,248,246,0.72) !important;
}

/* ==================================================================
   1.0.6 - Aile de cygne : ne doit plus deborder au-dessus du formulaire,
   correctif d'un bug mobile de la 1.0.4, titres des champs agrandis
   ================================================================== */

/* (a) + (b) : top:0 remplace le centrage vertical qui faisait deborder
   l'image au-dessus du panneau (donc sous l'eyebrow/le h2/le paragraphe).
   transform:none retire a la fois le translateY(-50%) devenu inutile et
   le translate(-50%,-50%) du reglage mobile, qui doublonnait avec le
   positionnement horizontal left:50%/margin-left:-50vw de la 1.0.4 (bug
   non remarque a l'epoque, non teste sur mobile). Une seule regle, hors
   media query, suffit : elle s'applique aussi bien en dessous qu'au-dessus
   de 900px. */
.contact-wing-emblem{
  top:0;
  transform:none;
}

/* (c) Titres des champs du formulaire legerement agrandis. */
.contact-form-panel .gfield_label,
.contact-form-panel label{
  font-size:12px !important;
}

/* ==================================================================
   1.0.7 - Test des champs (fond blanc, contour pointille vert, coins
   arrondis, cases plus hautes), bouton Envoyer agrandi, titres des champs
   en Playfair/casse normale, legende requise masquee
   ================================================================== */

/* (a) Champs du formulaire. */
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel textarea,
.contact-form-panel input[type="file"]{
  background:var(--blanc) !important;
  border:2px dotted var(--vert-signature) !important;
  border-radius:8px !important;
  padding:18px 18px !important;
}
.contact-form-panel input:focus,
.contact-form-panel select:focus,
.contact-form-panel textarea:focus{
  border-style:solid !important;
  border-color:var(--vert-signature) !important;
  background:var(--blanc) !important;
}

/* (b) Bouton "Envoyer" agrandi. En !important : sans quoi, comme pour le
   reste des reglages Gravity Forms, le CSS propre au plugin (imprime
   apres notre feuille) risque de gagner le departage de specificite. */
.contact-form-panel .gform_button,
.contact-form-panel input[type="submit"]{
  padding:20px 46px !important;
  font-size:13px !important;
}

/* (c) Titres des champs : Playfair, casse normale (le texte est deja
   saisi en minuscules/majuscule initiale dans Gravity Forms, on retire
   juste la transformation CSS qui le mettait en capitales). */
.contact-form-panel .gfield_label,
.contact-form-panel label{
  font-family:var(--serif-display) !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}

/* (d) Legende "indique les champs necessaires" masquee. */
.contact-form-panel .gform_required_legend{
  display:none !important;
}

/* ==================================================================
   1.0.8 - Trait pointille trop grossier, hauteur des champs toujours pas
   augmentee, titres des champs trop petits, case fichier mal centree
   ================================================================== */

/* (a) Trait discontinu (tirets fins) au lieu de points ronds. */
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel textarea,
.contact-form-panel input[type="file"]{
  border-style:dashed !important;
  border-width:1.5px !important;
}

/* (b) La 1.0.7 n'a pas suffi a agrandir les champs : le theme Orbital de
   Gravity Forms impose vraisemblablement sa propre hauteur, qui l'emporte
   sur notre padding tant qu'aucune hauteur n'est fixee de notre cote (non
   verifiable dans le harnais local, a reconfirmer sur le site reel). */
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel input[type="file"]{
  height:auto !important;
  min-height:56px !important;
}
.contact-form-panel textarea{
  min-height:150px !important;
}

/* (c) Titres des champs agrandis (12px -> 15px), trop petits en Playfair. */
.contact-form-panel .gfield_label,
.contact-form-panel label{
  font-size:15px !important;
}

/* (d) Case fichier : le texte interne ("aucun fichier choisi") n'est plus
   centre verticalement une fois le padding de la 1.0.7 applique (les
   input[type=file] natifs ne redistribuent pas leur contenu comme du
   texte normal). On centre son contenu explicitement. */
.contact-form-panel input[type="file"]{
  display:flex !important;
  align-items:center !important;
}

/* ==================================================================
   1.0.9 - Hauteur des champs nom/email/telephone/fichier reduite d'un
   sixieme, bouton "Envoyer" agrandi
   ================================================================== */

/* Message (textarea) non concerne : seuls ces champs ont ete signales
   trop hauts. */
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel input[type="file"]{
  min-height:47px !important;
}

.contact-form-panel .gform_button,
.contact-form-panel input[type="submit"]{
  font-size:15px !important;
}

/* ==================================================================
   1.0.10 - Nouvel essai sur la hauteur des champs (le padding, pas le
   min-height, semble etre le vrai levier), cartes des moyens de contact
   rallongees, largeur des paragraphes elargie, bouton Envoyer en
   majuscules garanti
   ================================================================== */

/* (a) Hauteur des champs : on agit cette fois sur le padding vertical,
   probablement le vrai levier (voir changelog). Min-height abaisse en
   filet de securite, sans etre le facteur dominant. */
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel input[type="file"]{
  padding-top:10px !important;
  padding-bottom:10px !important;
  min-height:40px !important;
}

/* (b) Cartes des moyens de contact rallongees. */
.contact-method{
  padding-top:56px;
  padding-bottom:56px;
}
.contact-method-label{
  position:relative;
  font-size:13px;
}
.contact-method-label::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  width:28px;
  height:1px;
  background:var(--vert-pale);
}
.contact-method-value{
  border-bottom:none;
  padding-bottom:0;
  font-size:13px;
  font-weight:600;
  color:var(--vert-pale);
}
.contact-method-value:hover{
  color:var(--blanc);
  border-color:transparent;
}

/* (c) Largeur des paragraphes (hero et bloc formulaire). */
.contact-hero-head .sub{
  max-width:720px;
}
#contact-form .head p{
  max-width:720px;
}

/* (d) Bouton "Envoyer" en majuscules, garanti face au CSS de Gravity
   Forms. */
.contact-form-panel .gform_button,
.contact-form-panel input[type="submit"]{
  text-transform:uppercase !important;
}

/* ==================================================================
   1.0.11 - Cartes des moyens de contact : espace autour du trait de
   separation, coins arrondis, valeur en blanc avec fleche design
   ================================================================== */

/* Marge du label doublee (14px -> 28px) pour laisser de la place des deux
   cotes du trait ; celui-ci est recentre dans cet espace (-8px -> -14px,
   soit 14px avant/14px apres). */
.contact-method-label{
  margin-bottom:28px;
}
.contact-method-label::after{
  bottom:-14px;
}

/* Coins des cartes legerement arrondis. */
.contact-method{
  border-radius:10px;
}

/* Valeur repassee en blanc, mise en avant par une fleche typographique
   plutot que par un soulignement. */
.contact-method-value{
  color:var(--blanc);
}
.contact-method-value::before{
  content:'›';
  display:inline-block;
  margin-right:6px;
  color:var(--vert-pale);
  font-weight:700;
  transition:transform .25s ease;
}
.contact-method-value:hover{
  color:var(--vert-pale);
}
.contact-method-value:hover::before{
  transform:translateX(3px);
}