/* ============================================================
   PAGE CONTACT — maquette du 27/09/2026
   ------------------------------------------------------------
   Chargee sur la seule page contact (functions.php). L en-tete est
   celui de toutes les pages interieures (style.css), sans changement.

   Trois temps, sans plus : un bandeau epure, les coordonnees et le
   formulaire cote a cote, une conclusion sur le paysage de brume.
   Hors du bandeau, aucune regle ne s active sans le marqueur
   .contact-v2, pose sur les deux sections du contenu.

   Les traits et pictogrammes sont en cuivre, #9E653D, comme sur les
   Guidances ; le cuivre ne sert pas au texte courant. Libelles et
   liens prennent #8A5A34 (5,3:1 sur le papier), le bouton garde
   --or-action, l or sombre des actions du site.
   ============================================================ */

body.edr-contact{
  --c-ivoire:#fbf8f2;--c-papier:#f8f2e8;--c-champ:#fefcf9;--c-champ-bord:#e2d7c7;
  --c-cuivre:#9E653D;--c-cuivre-trait:rgba(158,101,61,.42);--c-cuivre-texte:#8A5A34;
  --c-encre:#4f4841;--c-pastille:#efe5d6}

body.edr-contact .interieur.contact-page{padding-top:0;background:var(--c-papier)}
body.edr-contact .contact-page .entry{max-width:none;padding:0}
body.edr-contact .contact-page .entry > .bande{margin:0}
body.edr-contact .contact-page .bande__in{max-width:76rem}

/* ------------------------------------------------------------
   BANDEAU
   Le texte sur la grille de l en-tete (.wrap : le H1 tombe sous le
   logo). A droite, Gebo en filigrane et le rameau, tous deux
   decoratifs, peints ici plutot que poses dans le balisage.
   ------------------------------------------------------------ */
body.edr-contact .contact-hero{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  /* passe 2 : ~10 % plus bas a chaque largeur (518 -> 468 px a 1440) */
  min-height:clamp(20rem,32.5vw,29.25rem);
  background:
    radial-gradient(ellipse 34% 62% at 77% 46%,rgba(234,219,196,.36),rgba(234,219,196,0) 72%),
    linear-gradient(180deg,var(--c-ivoire) 0,#f9f4eb 100%)}
/* Gebo : le SVG porte deja son aquarelle et sa transparence (10 a 16 %) */
body.edr-contact .contact-hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;right:calc(max(0px,(100vw - 76rem) / 2) + clamp(3rem,10.5vw,10.5rem));
  width:clamp(14rem,28vw,25rem);aspect-ratio:1;transform:translateY(-47%);opacity:.68;
  background:url("assets/images/contact-gebo-filigrane.svg") center / contain no-repeat}
/* le rameau, pose sur le bord bas du bandeau, contre le bord droit */
body.edr-contact .contact-hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:0;bottom:0;height:92%;aspect-ratio:440/1066;
  background:url("assets/images/contact-branche-haut-droit-440.webp") right bottom / contain no-repeat}
body.edr-contact .contact-hero__texte{width:100%;padding-block:clamp(2.6rem,4.5vw,4.6rem)}
body.edr-contact .contact-hero .eyebrow{color:var(--or-action)}
body.edr-contact .contact-hero .eyebrow::before{background:var(--c-cuivre)}
body.edr-contact .contact-hero h1{
  max-width:none;margin-top:clamp(1.5rem,2.2vw,1.9rem);font-size:clamp(3rem,5.3vw,5.1rem)}
/* le filet sous le titre, celui des Guidances */
body.edr-contact .contact-hero h1::after{
  content:"";display:block;width:3rem;height:1px;margin-top:1.45rem;background:var(--or)}
body.edr-contact .contact-hero .accroche{
  max-width:21.5em;margin-top:1.45rem;font-family:var(--serif);font-size:clamp(1.14rem,1.9vw,1.34rem);
  line-height:1.5;color:var(--c-encre)}
body.edr-contact .contact-hero__appel{display:block}

/* ------------------------------------------------------------
   ECHANGEONS / M ECRIRE
   Deux colonnes sur la grille de la page, separees par un filet
   vertical a la hauteur des contenus, comme le Cadre des Guidances.
   A gauche, un second filet longe l introduction et les coordonnees ;
   l aparte, en dessous, s en detache.
   ------------------------------------------------------------ */
body.edr-contact .contact-page .entry > .contact-echange{
  padding-block:clamp(3.75rem,6.2vw,5.75rem) clamp(2.5rem,4vw,3.5rem);background:var(--c-papier);border-top:0}
body.edr-contact .contact-echange__grille{
  display:grid;grid-template-columns:minmax(0,5fr) 1px minmax(0,8.4fr);
  column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
body.edr-contact .contact-echange__grille::before{
  content:"";grid-column:2;grid-row:1;align-self:stretch;background:rgba(158,101,61,.22)}
body.edr-contact .contact-echange__coord{grid-column:1;grid-row:1;position:relative}
body.edr-contact .contact-echange__form{grid-column:3;grid-row:1}

body.edr-contact .contact-v2 h2{margin:0;font-size:clamp(2.3rem,3.4vw,3.1rem);line-height:1.08}
body.edr-contact .contact-v2 h2::after{
  content:"";display:block;width:2.6rem;height:1px;margin-top:1.3rem;background:var(--or)}
body.edr-contact .contact-v2 h2 + p{margin-top:1.6rem}
body.edr-contact .contact-v2 p{color:var(--c-encre);text-wrap:pretty}
body.edr-contact .contact-echange__fil p{max-width:24rem;font-size:.98rem;line-height:1.75}
body.edr-contact .contact-v2 .sans-coupure{white-space:nowrap}

/* le filet de gauche : dans la gouttiere de la page, jamais contre le bord */
body.edr-contact .contact-echange__fil{position:relative}
body.edr-contact .contact-echange__fil::before{
  content:"";position:absolute;top:.35rem;bottom:0;left:calc(-1 * clamp(1.5rem,4.4vw - 1rem,3rem));
  width:1px;background:rgba(158,101,61,.3)}
/* le court filet qui clot les coordonnees */
body.edr-contact .contact-echange__fil::after{
  content:"";display:block;width:3.6rem;height:1px;margin-top:1.9rem;background:rgba(158,101,61,.58)}

/* Coordonnees : une pastille, un libelle, la valeur */
body.edr-contact .entry .contact-coord{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.35rem}
body.edr-contact .entry .contact-coord li{margin:0}
body.edr-contact .contact-coord__ligne{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr);column-gap:1.35rem;align-items:center}
body.edr-contact .contact-coord__ligne::before{
  content:"";grid-row:1 / span 2;width:3.5rem;height:3.5rem;border-radius:50%;
  background:var(--c-pastille) center / 1.55rem no-repeat;transition:background-color .3s var(--ease)}
body.edr-contact .contact-coord__ligne--email::before{background-image:url("assets/images/contact-icone-email-cuivre.svg")}
body.edr-contact .contact-coord__ligne--tel::before{background-image:url("assets/images/contact-icone-telephone-cuivre.svg")}
body.edr-contact .contact-coord__cle{
  grid-column:2;align-self:end;font-size:.68rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-cuivre-texte)}
body.edr-contact .contact-coord__val{grid-column:2;align-self:start;margin-top:.2rem;font-size:1.02rem;color:var(--nuit);overflow-wrap:anywhere}
body.edr-contact .entry .contact-coord__val a{
  color:inherit;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.3em;text-decoration-color:rgba(27,30,43,.32);
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
/* le telephone n est souligne qu au survol, comme sur la maquette */
body.edr-contact .entry .contact-coord__ligne--tel a{text-decoration-color:transparent}

/* L aparte : une porte secondaire vers la reservation, sur un lavis
   a peine teinte, le rameau en marge gauche. Pas une carte. */
body.edr-contact .contact-v2 .contact-aparte{
  position:relative;max-width:none;margin-top:1.2rem;
  padding:1.25rem 1.25rem 1.3rem clamp(3.9rem,5vw,5rem);
  /* farthest-side : le lavis s eteint exactement aux bords de la boite */
  background:radial-gradient(farthest-side at 46% 50%,rgba(231,215,192,.85),rgba(231,215,192,.5) 55%,rgba(231,215,192,0) 100%)}
body.edr-contact .contact-aparte::before{
  content:"";position:absolute;pointer-events:none;
  left:calc(-1 * clamp(1.6rem,4.4vw - .6rem,3.3rem));bottom:-1.5rem;height:8.4rem;aspect-ratio:240/524;
  background:url("assets/images/contact-branche-bas-gauche-240.webp") left bottom / contain no-repeat}
body.edr-contact .contact-aparte__question{
  display:block;font-family:var(--serif);font-size:1.2rem;line-height:1.35;color:var(--c-encre);text-wrap:balance}
body.edr-contact .entry .contact-aparte a{
  display:inline-block;margin-top:.35rem;font-size:.95rem;font-weight:400;color:#7A4B23;  /* 4,45 -> 5,6:1 sur le lavis */
  border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:rgba(138,90,52,.5);transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
body.edr-contact .contact-aparte .fl{display:inline-block;margin-left:.3rem;transition:transform .35s var(--ease)}

/* ---- Le formulaire ----
   Fluent Forms, formulaire 3, inchange dans le module. style.css
   porte deja ses etats (erreur, envoi, reussite) ; on ne reprend ici
   que la matiere : champs ivoire, bordure fine, focus cuivre. */
body.edr-contact .contact-v2 .fluentform_wrapper_3{margin-top:clamp(1.75rem,2.6vw,2.25rem)}
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-group{margin-bottom:1.15rem}
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-input--label label{
  font-size:.68rem;font-weight:500;letter-spacing:.16em;color:#5d554e;margin-bottom:.5rem}
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-is-required.asterisk-right label:after{color:var(--c-cuivre)}
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-form-control{
  padding:.9rem 1.1rem;border:1px solid var(--c-champ-bord);border-radius:.55rem;background:var(--c-champ);
  font-size:.95rem;color:var(--txt)}
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-form-control::placeholder{color:#8a8279}
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-form-control:hover{border-color:#d3c4ae}
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-form-control:focus,
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-form-control:focus-visible{
  outline:0;border-color:#B07A45;box-shadow:0 0 0 3px rgba(176,122,69,.14);background:#fff}
/* l erreur garde la main sur la bordure de repos ci-dessus */
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-is-error .ff-el-form-control,
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-form-control[aria-invalid="true"]{border-color:#B2503C}
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-is-error .ff-el-form-control{
  border-width:2px;padding:calc(.9rem - 1px) calc(1.1rem - 1px)}
body.edr-contact .contact-v2 .fluent_form_3 textarea.ff-el-form-control{min-height:10rem}
/* Au clavier, le champ qui recoit le focus en remontant (Maj+Tab) se
   calait contre le haut de l ecran, sous l en-tete collant qui venait de
   reapparaitre : le libelle etait masque. La marge reserve l en-tete, le
   libelle et un peu d air. Le defilement apres un envoi refuse est
   recale, lui, par main.js (formulaireSousEntete). */
body.edr-contact .contact-v2 .fluent_form_3 .ff-el-form-control{scroll-margin-top:calc(var(--hauteur-entete) + 3rem)}
/* la liste : un triangle plein, celui de la maquette */
body.edr-contact .contact-v2 .fluent_form_3 select.ff-el-form-control{
  padding-right:2.8rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%234f4841'/%3E%3C/svg%3E");
  background-position:right 1.15rem center;background-size:.6rem auto;background-repeat:no-repeat}
/* Le bouton : la pilule cuivre du site, avec sa fleche. Le nom
   accessible reste celui du module (aria-label) : la fleche, posee en
   CSS, n y entre pas. */
body.edr-contact .contact-v2 .fluent_form_3 .ff_submit_btn_wrapper{margin-top:1.6rem;margin-bottom:0}
body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style{
  gap:.85rem;padding:1.05rem 1.9rem;font-size:.9rem;letter-spacing:.04em;background:var(--or-action);
  box-shadow:0 0 0 rgba(133,90,47,0);
  transition:background .35s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style::after{
  content:"\2192";font-size:1.05rem;line-height:1;transition:transform .35s var(--ease)}
/* la feuille du module pale le bouton au survol et au focus (opacity .8) :
   il fonce, ici */
body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style:focus{opacity:1}
body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style:hover{background:var(--or-action-survol);opacity:1}
/* Prenom et adresse sur une meme rangee. Fluent Forms rend ses
   groupes freres dans un fieldset, apres une legende et des champs
   caches : on part de groupes pleine largeur et on ne redescend que
   les deux premiers, designes par le nom de leur champ. */
@media(min-width:620px){
  body.edr-contact .contact-v2 .fluent_form_3 fieldset{
    display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem;align-items:start}
  body.edr-contact .contact-v2 .fluent_form_3 fieldset > .ff-el-group{grid-column:1 / -1}
  body.edr-contact .contact-v2 .fluent_form_3 fieldset > .ff-el-group:has(input[name="prenom"]){grid-column:1}
  body.edr-contact .contact-v2 .fluent_form_3 fieldset > .ff-el-group:has(input[name="email"]){grid-column:2}
}
/* La mention, precedee du cadenas */
body.edr-contact .contact-v2 .mention-form{
  position:relative;max-width:34rem;margin-top:1.35rem;padding-left:2.15rem;
  font-size:.8rem;line-height:1.7;color:var(--txt3)}
body.edr-contact .contact-v2 .mention-form::before{
  content:"";position:absolute;left:0;top:.2rem;width:1.3rem;height:1.3rem;
  background:url("assets/images/contact-icone-confidentialite-cuivre.svg") center / contain no-repeat}
body.edr-contact .entry .contact-v2 .mention-form a{
  color:var(--c-cuivre-texte);border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.25em;text-decoration-color:rgba(138,90,52,.45)}

/* ------------------------------------------------------------
   CONCLUSION
   Le paysage de brume, pose sur le bas de la section, le ciel se
   fondant dans le papier. La phrase flotte dans le ciel, entre le
   losange et un court filet. Le paysage s epaissit dans le tiers bas.

   L image n est jamais recadree en hauteur : elle prend toute la
   largeur, et jamais moins de 66rem, pour garder la vallee lisible
   sur telephone. La section la contient entiere (2048 x 634, soit
   30,96 % de sa largeur), plus une bande d air au-dessus.
   ------------------------------------------------------------ */
body.edr-contact .contact-page .entry > .contact-conclusion{
  --c-paysage-l:max(100vw,66rem);
  border-top:0;padding:clamp(2.25rem,3.8vw,3.5rem) 0 0;
  min-height:calc(var(--c-paysage-l) * .3096 + clamp(1.5rem,3vw,3rem));
  background:
    url("assets/images/contact-paysage-brumeux-2048.webp") center bottom / max(100%,66rem) auto no-repeat,
    var(--c-papier)}
body.edr-contact .contact-v2 .contact-conclusion__phrase{
  max-width:none;text-align:center;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.55rem,2.35vw,2.1rem);line-height:1.3;color:var(--nuit);text-wrap:balance}
/* le losange entre deux filets */
body.edr-contact .contact-conclusion__phrase::before{
  content:"";display:block;width:min(17rem,72%);height:2.6rem;margin:0 auto .6rem;
  background:
    url("assets/images/contact-ornement-losange-cuivre.svg") center / 2.6rem 2.6rem no-repeat,
    linear-gradient(var(--c-cuivre-trait),var(--c-cuivre-trait)) left center / calc(50% - 2.1rem) 1px no-repeat,
    linear-gradient(var(--c-cuivre-trait),var(--c-cuivre-trait)) right center / calc(50% - 2.1rem) 1px no-repeat}
body.edr-contact .contact-conclusion__phrase::after{
  content:"";display:block;width:2.6rem;height:1px;margin:1.35rem auto 0;background:var(--or)}

/* ------------------------------------------------------------
   PALIERS
   ------------------------------------------------------------ */
@media(max-width:1100px){
  body.edr-contact .contact-echange__grille{grid-template-columns:minmax(0,5fr) 1px minmax(0,7.6fr)}
  /* la gouttiere se resserre : le rameau de l aparte rentre dans la colonne */
  body.edr-contact .contact-aparte::before{left:-.9rem}
}

/* Tablette et telephone : tout s empile, coordonnees d abord, le
   formulaire dessous. Les deux filets verticaux s effacent ; un court
   filet horizontal separe les deux blocs. */
@media(max-width:899.98px){
  body.edr-contact .contact-hero::before{width:13rem;right:clamp(4.5rem,13vw,7rem);opacity:.6}
  body.edr-contact .contact-hero::after{height:78%}
  body.edr-contact .contact-echange__grille{grid-template-columns:minmax(0,1fr);row-gap:3rem}
  body.edr-contact .contact-echange__grille::before{
    grid-column:1;grid-row:2;width:3rem;height:1px;align-self:auto;background:rgba(158,101,61,.4)}
  body.edr-contact .contact-echange__coord{grid-row:1}
  body.edr-contact .contact-echange__form{grid-column:1;grid-row:3}
  body.edr-contact .contact-echange__fil::before{display:none}
  body.edr-contact .contact-echange__fil p{max-width:36rem}
  body.edr-contact .contact-v2 .contact-aparte{max-width:30rem}
  body.edr-contact .contact-aparte::before{left:-.35rem}
}

@media(max-width:599.98px){
  /* le bandeau : le texte d abord ; Gebo s efface, le rameau se fait
     petit dans le coin haut, a cote du titre, au-dessus de l accroche
     qui prend toute la largeur */
  body.edr-contact .contact-hero{min-height:0}
  body.edr-contact .contact-hero__texte{padding-block:1.85rem 2rem}
  body.edr-contact .contact-hero::before{display:none}
  body.edr-contact .contact-hero::after{top:.75rem;bottom:auto;height:9.25rem;opacity:.75;
    background-image:url("assets/images/contact-branche-haut-droit-300.webp")}
  body.edr-contact .contact-hero h1{font-size:3rem}
  body.edr-contact .contact-hero .accroche{font-size:1.12rem;line-height:1.55}
  body.edr-contact .contact-v2 h2{font-size:2.15rem}
  body.edr-contact .contact-page .entry > .contact-echange{padding-block:3.25rem 2.25rem}
  body.edr-contact .contact-v2 .contact-aparte{padding-left:3.9rem}
  body.edr-contact .contact-aparte::before{height:6.8rem;left:-.6rem;bottom:-1rem;opacity:.85}
  body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style{width:100%;justify-content:center}
  body.edr-contact .contact-page .entry > .contact-conclusion{padding-top:2rem}
}

/* ------------------------------------------------------------
   INTERACTIONS
   Une souris seulement pour le survol ; au clavier, les memes signes
   au focus. Couleurs et transform, jamais de dimension.
   ------------------------------------------------------------ */
@media(hover:hover) and (pointer:fine){
  body.edr-contact .contact-coord__ligne:hover::before{background-color:#e8dac6}
  body.edr-contact .entry .contact-coord__ligne:hover a{text-decoration-color:currentColor}
  body.edr-contact .entry .contact-aparte a:hover{color:#6f4524;text-decoration-color:currentColor}
  body.edr-contact .contact-aparte a:hover .fl{transform:translateX(4px)}
  body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style:hover{
    opacity:1;box-shadow:0 12px 24px -14px rgba(133,90,47,.6)}
  body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style:hover::after{transform:translateX(5px)}
}
body.edr-contact .contact-coord__ligne:focus-within::before{background-color:#e8dac6}
body.edr-contact .entry .contact-coord__val a:focus-visible,
body.edr-contact .entry .contact-aparte a:focus-visible,
body.edr-contact .entry .contact-v2 .mention-form a:focus-visible{
  outline:2px solid var(--c-cuivre);outline-offset:3px;border-radius:2px;text-decoration-color:currentColor}
body.edr-contact .contact-aparte a:focus-visible .fl,
body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style:focus-visible::after{transform:translateX(5px)}

@media(prefers-reduced-motion:reduce){
  body.edr-contact .contact-aparte .fl,
  body.edr-contact .contact-v2 .fluent_form_3 .ff-btn-submit.ff_btn_style::after{transform:none!important;transition:none}
  body.edr-contact .contact-coord__ligne::before,
  body.edr-contact .entry .contact-coord__val a,
  body.edr-contact .entry .contact-aparte a{transition:none}
}