/* ==========================================================================
   Europe's Volcanic House
   Systeme de mise en page. Mobile d'abord.
   Aucune animation d'apparition au defilement, aucune transition au survol
   sur les blocs. Le seul mouvement de la page est l'effet de frappe du bloc 1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices de marque, auto-hebergees
   Relevees sur ecolodge-france.com. Calista porte les titres, Catamaran le
   texte courant. La graisse 700 de Calista et la police vinchand existent dans
   assets/fonts mais ne sont pas chargees, cette page n'en a pas l'usage.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Calista';
  src: url('../fonts/calista-light.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Calista';
  src: url('../fonts/calista-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Catamaran';
  src: url('../fonts/catamaran-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Catamaran';
  src: url('../fonts/catamaran-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Variables
   -------------------------------------------------------------------------- */
:root {
  /* Palette reduite au strict minimum. La couleur vient des photographies.
     Ces valeurs sont issues de la palette de marque relevee sur le site principal. */
  --evh-nuit:       #171C22;
  --evh-encre:      #2E3742;
  --evh-encre-doux: #5B6978;
  --evh-papier:     #FAFAF9;
  --evh-or:         #C38525;
  --evh-trait:      rgba(46, 55, 66, .16);

  /* Traitement photographique.
     Le noir et blanc a ete confirme en visio par les deux parties.
     UNE SEULE VALEUR commande tout le site. Pour revenir a une desaturation
     partielle, remplacer la ligne ci-dessous par
       --evh-photo: saturate(.55) contrast(1.06) brightness(.98);
     Toutes les images suivent, sauf celle du bloc 7 qui porte
     .evh-visuel--couleur, exception encore a arbitrer, question 4 du dossier. */
  --evh-photo:      grayscale(1) contrast(1.06) brightness(.99);
  --evh-photo-fort: grayscale(1) contrast(1.14) brightness(1.03);

  /* Rythme vertical. Le vide est un element de composition a part entiere. */
  --evh-souffle:    clamp(6rem, 17vh, 13rem);
  --evh-souffle-sm: clamp(3rem, 8vh, 6rem);
  --evh-marge:      clamp(1.5rem, 6vw, 5rem);

  /* Largeur de ligne. Sous 70 caracteres pour le texte courant. */
  --evh-mesure:     34em;
  --evh-large:      78rem;
}

/* --------------------------------------------------------------------------
   3. Socle
   Note de structure. Elementor 4 pose les classes personnalisees sur le
   conteneur du widget, jamais sur l'element interne. Les selecteurs ci-dessous
   visent donc systematiquement le descendant, par exemple .evh-bloc__titre h2
   et non .evh-bloc__titre.
   -------------------------------------------------------------------------- */
body.evh {
  position: relative;
  background: var(--evh-papier);
  color: var(--evh-encre);
  font-family: 'Catamaran', ui-sans-serif, -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.1875rem);
  line-height: 1.78;
  letter-spacing: .3px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.evh h1, body.evh h2, body.evh h3 {
  font-family: 'Calista', Georgia, 'Times New Roman', serif;
  font-weight: 100;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

body.evh p { margin: 0 0 1.35em; }
body.evh p:last-child { margin-bottom: 0; }

body.evh :focus-visible { outline: 2px solid var(--evh-or); outline-offset: 4px; }

/* Pas de cartes, pas de bordures, pas d'ombres, pas de coins arrondis. */
body.evh .e-con, body.evh .elementor-widget { border-radius: 0; box-shadow: none; }

/* Reservee aux lecteurs d'ecran. */
.evh-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Blocs
   Chaque bloc occupe largement la hauteur de l'ecran, une idee par ecran.
   -------------------------------------------------------------------------- */
body.evh .evh-bloc {
  padding-block: var(--evh-souffle);
  padding-inline: var(--evh-marge);
  --gap: 0px;
}
body.evh .evh-bloc > .e-con-inner {
  max-width: var(--evh-large);
  margin-inline: auto;
  width: 100%;
  padding: 0;
  gap: clamp(2.5rem, 6vh, 4rem);
}
body.evh .evh-colonne { gap: clamp(1.25rem, 3vh, 2rem); padding: 0; }
body.evh .evh-bloc__titre { margin-bottom: clamp(.5rem, 2vh, 1.25rem); }

/* --------------------------------------------------------------------------
   5. Visuels
   Toutes les photographies sont carrees. Les proportions sont figees ici, de
   sorte qu'un remplacement de fichier ne demande aucune reprise de mise en
   page, et qu'aucun decalage ne survienne pendant le chargement.
   -------------------------------------------------------------------------- */
body.evh .evh-visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: var(--evh-photo);
}
body.evh .evh-visuel--couleur img { filter: none; }
body.evh .evh-visuel--fort img { filter: var(--evh-photo-fort); }

/* Le carre pose dans le vide plutot qu'etire. Sur grand ecran, une image carree
   en pleine largeur deviendrait disproportionnee en hauteur. */
.evh-visuel--pose  { max-width: min(38rem, 82vw); margin-inline: auto; width: 100%; }
.evh-visuel--large { max-width: min(54rem, 92vw); margin-inline: auto; width: 100%; }

/* Le bloc de respiration va d'un bord a l'autre de la fenetre. */
body.evh .evh-respiration { padding-inline: 0; }
body.evh .evh-respiration > .e-con-inner { max-width: none; }

/* Recadrage large maitrise, reserve aux rares visuels de pleine page. */
body.evh .evh-visuel--bandeau img {
  aspect-ratio: auto;
  height: clamp(62vh, 76vh, 88vh);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   5 bis. Bloc 0, l'entree
   Les coordonnees GPS seules, dans le vide, sur toute la hauteur du premier
   ecran. Rien d'autre, pas meme le logo, qui ne commence qu'au bloc suivant.
   -------------------------------------------------------------------------- */
/* Le bloc est en pleine largeur, Elementor ne genere donc pas de .e-con-inner.
   Le centrage se fait sur le conteneur lui-meme. */
body.evh .evh-entree {
  background: var(--evh-nuit);
  color: #E6E9EC;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--evh-souffle) var(--evh-marge);
}
body.evh .evh-entree__gps {
  display: flex;
  flex-direction: column;
  gap: .55em;
  margin: 0;
  font-family: 'Calista', Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.1rem, .75rem + 1.5vw, 2rem);
  line-height: 1.3;
  letter-spacing: .26em;
  color: #C9CFD6;
  text-align: center;
  text-indent: .26em;   /* compense l'interlettrage sur le dernier caractere */
}

/* --------------------------------------------------------------------------
   6. Bloc 1, ouverture
   Contrainte mesuree sur la photographie de Jeremie Mazet : le tiers superieur
   donne 15,9:1 de contraste avec du blanc et le tiers inferieur 19,1:1, mais la
   bande d'horizon ambree du centre ne donne que 3,25:1, sous le seuil AA.
   Le titre est donc ancre en haut, le texte en bas, et rien ne traverse le
   centre de l'image.
   -------------------------------------------------------------------------- */
body.evh .evh-ouverture {
  position: relative;
  padding: 0;
  background: var(--evh-nuit);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
body.evh .evh-ouverture > .e-con-inner {
  position: static;              /* les calques se calent sur le bloc lui-meme */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: none;
  padding: clamp(7rem, 17vh, 11rem) var(--evh-marge) clamp(3rem, 9vh, 5.5rem);
  --gap: 0px;
}

.evh-ouverture__fond { position: absolute; inset: 0; z-index: -2; }
body.evh .evh-ouverture__fond img {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 50%;
  filter: var(--evh-photo);
}

/* Voile ancre sur les deux bords. Le centre de l'image, donc l'horizon et son
   reflet, reste intact. */
body.evh .evh-ouverture::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Le voile assombrit le haut, juste ce qu'il faut pour le logo, laisse
     respirer la bande d'horizon et son reflet, puis descend franchement sur la
     zone ou le texte se pose. Les valeurs ne sont pas estimees, elles sont
     calculees par outils/mesurer-contraste.php sur neuf tailles de fenetre. */
  background: linear-gradient(to bottom,
    rgba(23,28,34,.52) 0%,
    rgba(23,28,34,.44) 18%,
    rgba(23,28,34,.44) 38%,
    rgba(23,28,34,.66) 55%,
    rgba(23,28,34,.85) 72%,
    rgba(23,28,34,.90) 100%);
}

/* En portrait, la fenetre est plus haute que large : l'image carree y tient
   tout entiere et il n'y a aucune marge de recadrage. Plutot que d'assombrir la
   photographie jusqu'a la faire disparaitre pour rendre le texte lisible, on
   change de composition : la photographie prend le premier ecran en entier avec
   le seul titre, et le texte se pose juste en dessous, sur le fond nuit. On
   gagne sur les deux tableaux, la grande image reste grande et le texte atteint
   un contraste de 15:1 au lieu de 6:1. */
@media (max-aspect-ratio: 1 / 1) {
  body.evh .evh-ouverture__fond,
  body.evh .evh-ouverture::after {
    height: 100svh;
    bottom: auto;
  }
  body.evh .evh-ouverture::after {
    background: linear-gradient(to bottom,
      rgba(23,28,34,.46) 0%,
      rgba(23,28,34,.20) 26%,
      rgba(23,28,34,.06) 52%,
      rgba(23,28,34,.24) 84%,
      rgba(23,28,34,.70) 100%);
  }
  body.evh .evh-ouverture > .e-con-inner {
    min-height: 0;
    padding-bottom: clamp(4rem, 10vh, 6rem);
  }
  /* Le titre occupe exactement ce qui reste du premier ecran, ce qui pousse le
     texte juste sous la photographie. */
  body.evh .evh-ouverture__titre {
    min-height: calc(100svh - clamp(7rem, 17vh, 11rem));
    display: flex;
    align-items: flex-start;
  }
  body.evh .evh-ouverture__texte {
    margin-top: 0;
    padding-top: clamp(3rem, 8vh, 5rem);
  }
}

body.evh .evh-ouverture__titre h1 {
  font-size: clamp(3rem, 13.5vw, 10rem);
  line-height: .94;
  letter-spacing: clamp(.01em, .5vw, .08em);
  color: #fff;
}
.evh-ouverture__texte {
  margin-top: auto;            /* pousse le texte et le bouton vers le bas */
  max-width: 38rem;
  padding-top: clamp(2rem, 6vh, 4rem);
}
body.evh .evh-ouverture__texte p { color: #F2F4F6; }
body.evh .evh-ouverture__texte em { font-style: italic; }
.evh-ouverture__cta { margin-top: clamp(2rem, 5vh, 3rem); }

/* --------------------------------------------------------------------------
   7. Effet de frappe
   Le texte complet est present dans le HTML des le chargement, l'animation ne
   fait que le masquer puis le reveler. Les mots ne se coupent jamais en deux.
   -------------------------------------------------------------------------- */
body.evh .evh-frappe__mot { display: inline-block; white-space: nowrap; }
body.evh .evh-frappe__c { opacity: 0; }
body.evh .evh-frappe__c.est-vu { opacity: 1; }
body.evh .evh-frappe.est-lance .evh-frappe__c { transition: opacity .32s ease-out; }

/* Tant que le script n'a pas pris la main, le texte reste visible. Si le
   JavaScript echoue ou n'arrive jamais, rien ne disparait. Cette regle est
   plus specifique que celle qui masque, elle passe donc devant. */
body.evh .evh-frappe:not(.est-prete) .evh-frappe__c { opacity: 1; }

/* Sur mobile, un simple fondu progressif plutot que la frappe caractere par
   caractere, comme le prevoit le brief. */
@media (max-width: 767px) {
  body.evh .evh-frappe.est-lance .evh-frappe__c { transition: opacity .9s ease-out; }
}

/* --------------------------------------------------------------------------
   8. Textes des blocs
   -------------------------------------------------------------------------- */
body.evh .evh-bloc__titre h2 {
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  max-width: 16ch;
}
body.evh .evh-bloc__texte p { max-width: var(--evh-mesure); }

/* Le paragraphe de synthese du bloc 3, un cran au-dessus du texte courant. */
body.evh .evh-bref p {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  line-height: 1.64;
  max-width: 26em;
}
body.evh .evh-bref strong { font-weight: 600; letter-spacing: .06em; }

/* La citation du bloc 4, en grand. */
body.evh .evh-citation p {
  font-family: 'Calista', Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.45rem, 1rem + 2.2vw, 2.9rem);
  line-height: 1.36;
  letter-spacing: 0;
  max-width: 24ch;
  margin: 0;
}

/* Le poeme du bloc 6. Les retours a la ligne sont ceux de la cliente. */
body.evh .evh-poeme p {
  font-family: 'Calista', Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.55;
  max-width: 26ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Compositions
   Mobile d'abord. Deux colonnes seulement a partir de 900px.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  body.evh .evh-duo > .e-con-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
  body.evh .evh-duo--inverse > .e-con-inner > *:first-child { order: 2; }
}

/* Le bloc 4 et le bloc 9 restent sur une seule colonne. Les images posees se
   centrent par leur propre marge, ce qui evite de centrer aussi les boutons. */
body.evh .evh-ecoute > .e-con-inner,
body.evh .evh-voyage > .e-con-inner { align-items: stretch; }

/* --------------------------------------------------------------------------
   10. Appels a l'action
   Pas de fleche ajoutee au texte des liens et des boutons.
   -------------------------------------------------------------------------- */
body.evh .evh-cta .elementor-button {
  display: inline-block;
  font-family: 'Catamaran', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--evh-encre);
  background: none;
  border: 1px solid var(--evh-trait);
  border-bottom: 1px solid var(--evh-or);
  border-radius: 0;
  padding: 1.15em 2.4em;
  line-height: 1.2;
  fill: currentColor;
}
body.evh .evh-cta--clair .elementor-button {
  color: #fff;
  border-color: rgba(255,255,255,.32);
  border-bottom-color: var(--evh-or);
}
body.evh .evh-cta .elementor-button-content-wrapper { gap: 0; }

/* Survol. Le brief interdit les transitions au survol sur les blocs, pas sur
   les commandes : un bouton sans retour visuel n'est pas silencieux, il est
   muet. Le geste reste minimal, le filet or fait le tour et un voile tres
   leger s'installe. Rien ne bouge, rien ne grossit. */
body.evh .evh-cta .elementor-button {
  transition: border-color .3s ease, background-color .3s ease;
}
body.evh .evh-cta .elementor-button:hover,
body.evh .evh-cta .elementor-button:focus-visible {
  border-color: var(--evh-or);
  background-color: rgba(195, 133, 37, .07);
  color: var(--evh-encre);
}
body.evh .evh-cta--clair .elementor-button:hover,
body.evh .evh-cta--clair .elementor-button:focus-visible {
  border-color: var(--evh-or);
  background-color: rgba(255, 255, 255, .1);
  color: #fff;
}

/* Le lien de retour des pages legales suit la meme logique. */
body.evh-legal .evh-retour { transition: border-color .3s ease; }
body.evh-legal .evh-retour:hover { border-bottom-color: var(--evh-encre); }

/* Les liens. Meme principe que les boutons : le survol se contente de lever
   le voile. Un lien de texte gagne son filet or, un lien de pied de page
   s'eclaircit, le selecteur de langue sort de sa demi-teinte. Aucune
   translation, aucun agrandissement : la page ne bouge pas. */

/* Mentions legales du pied de page, sur fond nuit. */
.evh-pied__mentions a,
.evh-pied__signature a {
  transition: color .3s ease, border-bottom-color .3s ease;
}
.evh-pied__mentions a:hover,
.evh-pied__mentions a:focus-visible {
  color: #FFFFFF;
  border-bottom-color: var(--evh-or);
}
.evh-pied__signature a:hover,
.evh-pied__signature a:focus-visible {
  color: #C8D0D7;
  border-bottom-color: var(--evh-or);
}

/* Selecteur de langue. Il ne prend pas le filet or, il remonte simplement a
   pleine opacite, a egalite avec la langue courante. */
.evh-langues a { transition: opacity .3s ease; }
.evh-langues a:hover,
.evh-langues a:focus-visible { opacity: 1; }

/* Logo. Le filtre porte la teinte, c'est donc lui qui s'ajuste. Deux regles,
   car l'accueil inverse le logo en blanc sur la photo. */
.evh-entete__logo img { transition: filter .3s ease; }
.evh-entete__logo:hover img,
.evh-entete__logo:focus-visible img { filter: brightness(0) opacity(1); }
body.evh.home .evh-entete__logo:hover img,
body.evh.home .evh-entete__logo:focus-visible img { filter: brightness(0) invert(1) opacity(1); }

/* Liens de texte des pages legales et lien vers la politique de
   confidentialite du formulaire : le filet or passe a l'encre. */
body.evh-legal .site-main a,
body.evh .evh-form .elementor-field-type-acceptance a {
  transition: border-bottom-color .3s ease;
}
body.evh-legal .site-main a:hover,
body.evh-legal .site-main a:focus-visible,
body.evh .evh-form .elementor-field-type-acceptance a:hover,
body.evh .evh-form .elementor-field-type-acceptance a:focus-visible {
  border-bottom-color: var(--evh-encre);
}

/* --------------------------------------------------------------------------
   12. En-tete et pied de page
   -------------------------------------------------------------------------- */
/* En-tete. Par defaut elle est dans le flux, en encre sur fond papier : c'est
   le cas des pages legales. Sur la page elle-meme, elle se superpose a l'image
   et ne commence qu'au bloc 1, c'est a dire apres l'ecran d'entree. */
.evh-entete {
  padding: clamp(1.5rem, 4vh, 2.5rem) var(--evh-marge);
}
/* Elementor enveloppe la sortie d'un code court dans un div. Sans cette ligne,
   le flex ci-dessous n'a qu'un seul enfant a repartir et le selecteur de langue
   reste colle au logo au lieu d'aller a droite. */
.evh-entete .elementor-shortcode,
.evh-pied .elementor-shortcode { display: contents; }
.evh-entete > .elementor-widget { pointer-events: auto; }
.evh-entete__logo { display: inline-block; width: clamp(120px, 16vw, 190px); }
.evh-entete__logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) opacity(.84);
}

/* Le decalage d'un ecran ne vaut QUE pour la page d'accueil, qui commence par
   l'ecran de coordonnees. Sur les autres pages en body.evh, le formulaire par
   exemple, l'en-tete reste dans le flux comme sur les pages legales. */
body.evh.home .evh-entete {
  position: absolute;
  top: 100svh;
  left: 0;
  right: 0;
  z-index: 10;
  padding: clamp(1.25rem, 3.5vh, 2.25rem) var(--evh-marge);
  pointer-events: none;
}
body.evh.home .evh-entete__logo img { filter: brightness(0) invert(1) opacity(.92); }


/* Selecteur de langue. Discret, en haut a droite, aligne sur le logo. */
/* Le logo a gauche, le selecteur de langue a droite, sur la meme ligne. */
.evh-entete > .elementor-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}
.evh-langues { display: inline-flex; gap: .75rem; align-items: baseline; }
.evh-langues a,
.evh-langues .est-courante {
  color: var(--evh-encre);
  text-decoration: none;
  font-family: 'Catamaran', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
}
.evh-langues a { opacity: .55; border-bottom: 1px solid transparent; }
.evh-langues .est-courante { opacity: 1; border-bottom: 1px solid var(--evh-or); padding-bottom: .15em; }
body.evh.home .evh-langues a,
body.evh.home .evh-langues .est-courante { color: #fff; }

.evh-pied {
  background: var(--evh-nuit);
  color: #E6E9EC;
  text-align: center;
  padding-block: clamp(5rem, 14vh, 9rem);
  padding-inline: var(--evh-marge);
}
.evh-pied .evh-pied__signe-w p,
.evh-pied__signe {
  /* Le kit Elementor impose sa couleur d'encre a tous les titres, invisible
     sur le fond nuit du pied de page. On la reprend ici. */
  color: #E6E9EC;
  font-family: 'Calista', Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.7rem, 1rem + 3.2vw, 3.5rem);
  letter-spacing: .1em;
  line-height: 1.2;
  margin-bottom: .5em;
}
.evh-pied__sous-w p,
.evh-pied__sous { font-size: .9375rem; color: #A8B2BC; margin-bottom: clamp(3rem, 8vh, 5rem); }
.evh-pied__logo { max-width: 180px; margin: 0 auto clamp(2rem, 5vh, 3rem); }
.evh-pied__logo img { width: 100%; height: auto; filter: brightness(0) invert(1) opacity(.8); }
.evh-pied__adresse {
  font-size: .875rem;
  color: #A8B2BC;
  letter-spacing: .04em;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}
.evh-pied__mentions { font-size: .8125rem; color: #7E8A95; }
.evh-pied__mentions span { opacity: .5; padding: 0 .2em; }
.evh-pied__mentions a { color: #A8B2BC; text-decoration: none; border-bottom: 1px solid rgba(168,178,188,.3); }

/* Copyright et signature de l'agence, un cran en dessous des mentions. */
.evh-pied__signature {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  font-size: .75rem;
  line-height: 1.9;
  letter-spacing: .04em;
  color: #6B7681;
}
.evh-pied__signature a {
  color: #8C98A3;
  text-decoration: none;
  border-bottom: 1px solid rgba(140,152,163,.32);
}

/* --------------------------------------------------------------------------
   13. Mouvement reduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.evh .evh-frappe .evh-frappe__c { opacity: 1 !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   14. Petits ecrans
   Le libelle du bouton principal est long. Sous 480px il passe pleine largeur
   plutot que de se casser en deux lignes serrees.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  body.evh .evh-cta .elementor-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1.2em 1rem;
    letter-spacing: .1em;
  }
}

/* --------------------------------------------------------------------------
   15. Pages légales
   Mentions légales, confidentialité, cookies. Même typographie que la page
   principale, mais une mise en page de lecture, pas de mise en scène.
   -------------------------------------------------------------------------- */
body.evh-legal {
  background: var(--evh-papier);
  color: var(--evh-encre);
  font-family: 'Catamaran', ui-sans-serif, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: .3px;
}
body.evh-legal .site-header,
body.evh-legal .site-footer { display: none; }
/* Sur les pages legales, l'en-tete s'aligne sur la colonne de lecture. La
   contrainte porte sur le conteneur, que nous maitrisons, et non sur le widget,
   dont Elementor impose la largeur. */
body.evh-legal .evh-entete {
  max-width: calc(44rem + 2 * var(--evh-marge));
  margin-inline: auto;
}
body.evh-legal main,
body.evh-legal .site-main {
  /* La marge interieure est comprise dans la largeur, box-sizing oblige. Sans
     ce calcul, la colonne de texte tombait a 544px sur un grand ecran. */
  max-width: calc(44rem + 2 * var(--evh-marge));
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 8rem) var(--evh-marge) clamp(5rem, 14vh, 9rem);
}
body.evh-legal h1 {
  font-family: 'Calista', Georgia, serif;
  font-weight: 100;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
}
body.evh-legal h2 {
  font-family: 'Calista', Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 .7em;
}
body.evh-legal p { margin: 0 0 1.25em; }
body.evh-legal .site-main a { color: var(--evh-encre); text-decoration: none; border-bottom: 1px solid var(--evh-or); }
/* Ni le logo ni le selecteur de langue ne sont des liens de texte, ils ne
   prennent pas le filet or. */
.evh-entete__logo, .evh-langues a { border-bottom: 0; text-decoration: none; }
body.evh-legal table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: .9375rem; }
body.evh-legal th, body.evh-legal td {
  text-align: left; padding: .7em .9em; border-bottom: 1px solid var(--evh-trait); vertical-align: top;
}
body.evh-legal th { font-weight: 600; }
body.evh-legal code { font: .875rem ui-monospace, Menlo, monospace; background: rgba(46,55,66,.07); padding: .1em .4em; }
body.evh-legal .evh-retour {
  display: inline-block;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--evh-or);
  text-decoration: none;
  color: var(--evh-encre);
}

/* Tableau des pages légales. Quatre colonnes ne tiennent pas sur un téléphone,
   la zone défile horizontalement plutôt que d'écraser les colonnes. */
body.evh-legal .evh-table {
  overflow-x: auto;
  margin: 1.5em 0;
  -webkit-overflow-scrolling: touch;
}
body.evh-legal .evh-table table { margin: 0; min-width: 30rem; }
body.evh-legal .evh-table:focus-visible { outline: 2px solid var(--evh-or); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   16. Page du formulaire, Le voyage jusqu'à nous
   Même sobriété que le reste : pas de bordure superflue, pas de coin arrondi,
   pas d'ombre. Les champs se signalent par un simple filet sous le texte.
   -------------------------------------------------------------------------- */
body.evh .evh-voyage-formulaire > .e-con-inner { max-width: 46rem; }

body.evh .evh-form__titre h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  max-width: 20ch;
  margin-bottom: .6em;
}
body.evh .evh-form__chapeau p {
  max-width: var(--evh-mesure);
  color: var(--evh-encre-doux);
  margin-bottom: clamp(2.5rem, 7vh, 4rem);
}

/* Titres de section à l'intérieur du formulaire */
/* Chaque section vit dans son propre conteneur Elementor, elle y est donc
   toujours premier enfant. Un :first-child sur la section annulait la marge
   de toutes. On vise le premier groupe du formulaire, pas la section. */
body.evh .evh-form__section { margin: clamp(3rem, 7vh, 4.5rem) 0 1rem; }
body.evh .evh-form .elementor-field-group:first-child .evh-form__section { margin-top: 0; }
body.evh .evh-form__section h2 {
  font-family: 'Calista', Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 .35em;
}
body.evh .evh-form__section p {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--evh-encre-doux);
  max-width: var(--evh-mesure);
  margin: 0;
}

/* Les champs */
body.evh .evh-form .elementor-form { --e-form-steps-indicators-spacing: 0; }
body.evh .evh-form .elementor-field-group { padding-inline: 0; }
body.evh .evh-form .elementor-field-group > .elementor-field-label {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--evh-encre-doux);
  margin-bottom: .6em;
  font-weight: 600;
}
body.evh .evh-form .elementor-field-group .elementor-field:not([type="checkbox"]):not([type="radio"]):not(.elementor-button) {
  font-family: 'Catamaran', sans-serif;
  font-size: 1rem;
  color: var(--evh-encre);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--evh-trait);
  border-radius: 0;
  box-shadow: none;
  padding: .6em 0;
  width: 100%;
}
body.evh .evh-form .elementor-field-group .elementor-field:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none;
  border-bottom-color: var(--evh-or);
}
/* Les cases et les boutons radio gardent leur taille naturelle. */
body.evh .evh-form input[type="checkbox"],
body.evh .evh-form input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: .3em 0 0;
  border: 0;
  padding: 0;
}
body.evh .evh-form .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: .6em;
}
body.evh .evh-form textarea.elementor-field { line-height: 1.7; resize: vertical; }

/* Choix multiples et cases à cocher */
body.evh .evh-form .elementor-field-subgroup { display: grid; gap: .85rem; }
body.evh .evh-form .elementor-field-option label {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--evh-encre);
  padding-left: .55em;
}
body.evh .evh-form .elementor-field-option input { accent-color: var(--evh-or); }
body.evh .evh-form .elementor-field-type-acceptance .elementor-field-option label {
  font-size: .875rem;
  color: var(--evh-encre-doux);
}
body.evh .evh-form .elementor-field-type-acceptance a {
  color: var(--evh-encre);
  border-bottom: 1px solid var(--evh-or);
  text-decoration: none;
}

/* Le bouton, même traitement que les appels à l'action de la page */
body.evh .evh-form .elementor-button {
  display: inline-block;
  font-family: 'Catamaran', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--evh-encre);
  background: none;
  border: 1px solid var(--evh-trait);
  border-bottom: 1px solid var(--evh-or);
  border-radius: 0;
  padding: 1.15em 2.4em;
  margin-top: 1.5rem;
  cursor: pointer;
}
body.evh .evh-form .elementor-button { transition: border-color .3s ease, background-color .3s ease; }
body.evh .evh-form .elementor-button:hover,
body.evh .evh-form .elementor-button:focus-visible {
  border-color: var(--evh-or);
  background-color: rgba(195, 133, 37, .07);
  color: var(--evh-encre);
}
body.evh .evh-form .elementor-field-type-submit { display: block; }
body.evh .evh-form .elementor-field-type-submit .elementor-button { width: auto; }

/* Messages après envoi */
body.evh .evh-form .elementor-message {
  font-family: 'Calista', Georgia, serif;
  font-weight: 100;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  color: var(--evh-encre);
  margin-top: 1.75rem;
}
body.evh .evh-form .elementor-message.elementor-message-danger { color: #A4432F; }
body.evh .evh-form .elementor-message::before { display: none; }

/* --------------------------------------------------------------------------
   16. Credits photographiques
   Demandes par la cliente le 7 octobre 2026. Le parti pris de la page est le
   silence, le credit se tient donc tres en retrait : aligne a droite sous la
   photographie, petit, dans le gris du texte secondaire. Il se lit si on le
   cherche et ne se remarque pas sinon.
   -------------------------------------------------------------------------- */
body.evh .elementor-widget-image figcaption.widget-image-caption {
  margin-top: .7em;
  text-align: right;
  font-family: 'Catamaran', ui-sans-serif, sans-serif;
  font-size: .6875rem;
  font-weight: 400;
  /* Elementor met ses legendes en italique. Sur cette page l'italique est
     reserve au nom de marque, le credit revient donc en romain. */
  font-style: normal;
  letter-spacing: .08em;
  color: var(--evh-encre-doux);
  opacity: .6;
}
/* Sous une photographie pleine largeur, le credit s'aligne sur la marge. */
body.evh .evh-visuel--bandeau figcaption.widget-image-caption {
  padding-inline: var(--evh-marge);
}

/* Credit de la photographie d'ouverture. Elle sert de fond en pleine page, une
   legende classique y serait masquee par le voile et par le titre.
   Il n'est pas cale en bas de l'ecran non plus : le bandeau cookies y est fixe
   et le recouvrait entierement. Il se place donc dans le flux, a droite, juste
   sous le bouton, ou rien ne vient jamais le masquer. */
body.evh .evh-ouverture__credit {
  align-self: flex-end;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  pointer-events: none;
}
body.evh .evh-ouverture__credit p {
  margin: 0;
  text-align: right;
  font-family: 'Catamaran', ui-sans-serif, sans-serif;
  font-size: .6875rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .08em;
  color: #fff;
  opacity: .42;
}