/*
 * RVR Expérience — ce que le thème AJOUTE au site figé.
 *
 * Tout le reste du CSS est celui d'Elementor, copié octet pour octet
 * (assets/elementor/). Ce fichier-ci ne contient que des ajouts voulus, et
 * chacun cible une classe qui lui est propre : il ne peut rien déplacer de
 * ce qui existait. Chargé dans le <head>, après les feuilles d'Elementor du
 * <head> (inc/elementor.php).
 */

/* ------------------------------------------------------------------ *
 * Bouton « appeler » de l'en-tête (téléphone et tablette)
 *
 * Réplique du bouton du menu (.elementor-menu-toggle, widget-nav-menu.min.css
 * et post-149.css) : même boîte de 33 × 33 px (icône 1em de 22 px + 0.25em de
 * marge intérieure), même blanc du kit, même fond presque transparent, mêmes
 * coins de 3 px, même absence d'effet au survol. Il se place à sa gauche,
 * séparé de 10 px — l'écart qui sépare le hamburger du bord du bandeau
 * (padding du conteneur, 10 px à toutes les largeurs).
 *
 * Position absolue dans le conteneur de l'en-tête (.e-con, position:
 * relative) : hors du flux flexible, il ne pousse ni le logo ni le menu.
 * Centré verticalement comme le hamburger (align-items: center ; padding
 * haut et bas identiques). z-index 1 : le widget du menu, positionné lui
 * aussi et placé après dans le HTML, couvrirait sinon le bouton au clic.
 *
 * Masqué au-delà de 1024 px : c'est là qu'Elementor remplace le hamburger
 * par le menu horizontal (elementor-nav-menu--dropdown-tablet), et l'en-tête
 * de bureau doit rester identique au pixel près.
 *
 * Aucune animation : rien à couper pour prefers-reduced-motion. Anneau de
 * focus : celui du navigateur, comme le hamburger (rien ne le retire ici ;
 * la remise à zéro de Hello ne vise que les liens sans href).
 * ------------------------------------------------------------------ */
.rvr-appel {
	display: none;
}

@media (max-width: 1024px) {
	.elementor-149 .rvr-appel {
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		right: calc(10px + 1.5em + 10px);
		box-sizing: border-box;
		width: 1.5em;
		height: 1.5em;
		margin-block: auto;
		padding: .25em;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		line-height: 1;
		color: var(--e-global-color-text);
		background-color: rgba(0, 0, 0, .05);
		border-radius: 3px;
		cursor: pointer;
	}

	/* Hello colore les liens au survol (a:hover { color: #336 }) : le
	   hamburger, lui, ne change pas. */
	.elementor-149 .rvr-appel:hover,
	.elementor-149 .rvr-appel:focus,
	.elementor-149 .rvr-appel:active {
		color: var(--e-global-color-text);
	}

	/* Même boîte que le hamburger, mais un combiné plein de 22 px pèse
	   nettement plus lourd que trois traits fins (le dessin du hamburger
	   n'occupe que 20 × 14 px de ses 22) : à 0.8em (17,6 px), les deux
	   icônes ont le même poids à l'œil. */
	.elementor-149 .rvr-appel svg {
		display: block;
		width: .8em;
		height: .8em;
		fill: currentColor;
	}
}

/* ------------------------------------------------------------------ *
 * Lien d'évitement (« Aller au contenu »), au focus
 *
 * Sur le site d'origine, son apparence au clavier venait de la feuille de
 * WooCommerce Blocks (wc-blocks.css, chargée en dernier, elle l'emportait
 * sur celle de Hello) : fond blanc, ombre, gras. inc/perf.php ne charge
 * plus cette feuille sur les pages qui ne vendent rien ; ses deux règles
 * sont recopiées ici, telles quelles, pour que le lien reste identique.
 * Ce fichier passe après hello-elementor-theme.css et frontend.min.css,
 * les seules autres feuilles qui le stylent : même cascade qu'avant.
 * ------------------------------------------------------------------ */
.screen-reader-text{clip:rect(1px,1px,1px,1px);word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;overflow-wrap:normal!important;padding:0;position:absolute!important;width:1px}
.screen-reader-text:focus{clip:auto!important;background-color:#fff;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip-path:none;color:#2b2d2f;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}

/* ------------------------------------------------------------------ *
 * Formulaire de contact : ce que le CSS d'Elementor ne prévoyait pas
 *
 * Les champs ajoutés (type de service, VR, année, photos) portent le
 * balisage d'Elementor Pro (inc/contact.php, rvr_contact_champs()) et
 * prennent donc d'eux-mêmes taille, fond, coins et police des autres
 * (frontend.min.css, post-475.css). Restent quelques détails :
 * ------------------------------------------------------------------ */

/* 1. La taille du texte de la liste déroulante. Les champs texte reçoivent
   16 px (interligne 22,4 px) de .elementor-field-textual.elementor-size-md ;
   la liste, elle, a « font-size: inherit » dans frontend.min.css (règle plus
   précise) et hérite donc de la taille du kit, en vw : 19,6 px à 1960 px de
   large, 13,65 px à 390. Elle aurait eu l'air d'un autre formulaire. Mesuré
   (getComputedStyle) sur le champ Nom. */
.elementor-widget-form .elementor-field-group .elementor-select-wrapper select.elementor-size-md {
	font-size: 16px;
	line-height: 1.4;
}

/* La liste déroulante tant que rien n'est choisi : son texte (« Type de
   service ») doit avoir la teinte des textes grisés des autres champs.
   Elementor les grise par « color: inherit; opacity: .6 » sur
   ::placeholder, ce qu'une liste n'a pas : même blanc (celui de
   post-475.css, hérité), à 60 %. La première ligne est la valeur de secours
   des navigateurs sans color-mix(). :invalid = obligatoire et encore vide. */
.elementor-widget-form .elementor-select-wrapper select:invalid {
	color: rgba(255, 255, 255, .6);
	color: color-mix(in srgb, currentColor 60%, transparent);
}

/* Le menu ouvert : Chrome et Firefox y reprennent la couleur et le fond de
   la liste — du blanc sur un noir translucide qui, dans la fenêtre du menu,
   devient gris pâle : illisible. Des options lisibles, comme celles du
   système. */
.elementor-widget-form .elementor-select-wrapper select option {
	color: #1f2124;
	background-color: #fff;
}

/* 3. L'anneau de focus. Elementor l'éteint sur tous les champs
   (.elementor-field-textual:focus { outline: 0 }) et le remplace par une
   ombre intérieure noire à 10 %, invisible sur ces champs noirs : au
   clavier, on ne voyait pas où l'on était. Un trait blanc de 2 px à
   l'intérieur du champ (rien ne bouge autour), seulement au focus. */
.elementor-widget-form .elementor-field-group .elementor-field-textual:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* 4. Le champ Photos (éteint par défaut). Son étiquette est la seule
   visible : un champ de fichiers n'a pas de texte grisé. Même police que
   les champs, en plus petit. Le bouton « Choisir des fichiers » du
   navigateur reprend les couleurs du bouton « Envoyer! » en plus discret. */
.elementor-widget-form .elementor-field-type-upload > .elementor-field-label {
	width: 100%;
	padding: 0 0 6px;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-weight: var(--e-global-typography-primary-font-weight);
	font-size: 14px;
	line-height: 1.4;
}

.elementor-widget-form .elementor-upload-field {
	cursor: pointer;
	line-height: 33px;
}

.elementor-widget-form .elementor-upload-field::file-selector-button {
	margin-inline-end: 12px;
	padding: 0 14px;
	height: 33px;
	border: 0;
	border-radius: 4px;
	font: inherit;
	font-size: 14px;
	color: #fff;
	background-color: var(--e-global-color-cbcae74);
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Pied de page : « Politique de confidentialité », au bout du ©
 *
 * Le lien prend la police, la taille, l'italique et le blanc de la ligne
 * qu'il prolonge (post-215.css, élément 0364bdd) : sans cela, le kit lui
 * donnerait Poppins (.elementor-kit-6 a) et Hello le rose #c36. Souligné,
 * comme les liens du menu du pied, pour qu'on le reconnaisse comme lien.
 * ------------------------------------------------------------------ */
.elementor-215 .rvr-pied-confidentialite,
.elementor-215 .rvr-pied-confidentialite:hover,
.elementor-215 .rvr-pied-confidentialite:focus {
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elementor-215 .rvr-pied-confidentialite:hover {
	color: var(--e-global-color-accent);
}

.elementor-215 .rvr-pied-confidentialite:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Le lien ne se coupe pas en deux ; sur téléphone, où la ligne du © occupe
   déjà toute la largeur, il passe seul à la ligne, sans le point qui
   resterait pendu au bout de la première. */
.elementor-215 .rvr-pied-confidentialite {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.elementor-215 .rvr-pied-sep {
		display: none;
	}

	.elementor-215 .rvr-pied-confidentialite {
		display: inline-block;
		margin-left: .3em;
	}
}