:root {

}

nav .btn {
	background-color: var(--navbar-button);
}

nav .btn:hover {
	background-color: var(--nav-btn-hover);
}

.btn { border: none; color: white; }
.btn:hover { color: var(--button-form-clr); border: 1px solid var(--button-form-clr);  }
.btn svg, .btn svg * { fill: white; }
.btn:hover svg, .btn:hover svg * { fill: var(--navbar-hover); }

.bg_formulaire {
	background-color: var(--formulaire);
}

#formulaire .btn:hover {
	color: var(--secondary); border: 1px solid var(--secondary);
}

/* ----------- --------- */

header .offer {
	position: absolute;
    left: 0;
    top: 40px;
    z-index: 1;
    margin-bottom: 0;
}

header .header_offres {
    position: absolute;
    top: 3vw;
    right: -9vw;
    z-index: 1;
}

header .logo-onora {
	width: 9vw;
    height: auto;
    position: absolute;
    left: 8vw;
    top: 0;
    z-index: 1;
}

header .header_offres img {
    width: 50%;
    height: auto;
}

#plus .plus-img {
	width: 35%;
	margin: 1vw 0;
}

header .offer > div {
    background-color: var(--primary);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768.248' height='245.779' viewBox='0 0 768.248 245.779'%3E%3Cpath id='Tracé_3834' data-name='Tracé 3834' d='M-295.971,0H472.276L411.369,245.779h-707.34Z' transform='translate(295.971)' fill='%23181730'/%3E%3C/svg%3E") no-repeat right/cover;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768.248' height='245.779' viewBox='0 0 768.248 245.779'%3E%3Cpath id='Tracé_3834' data-name='Tracé 3834' d='M-295.971,0H472.276L411.369,245.779h-707.34Z' transform='translate(295.971)' fill='%23181730'/%3E%3C/svg%3E") no-repeat right/cover;
	color: white;
	padding-top: calc(var(--padd) * .5);
	padding-right: calc(var(--padd) * 2.2);
	padding-bottom: calc(var(--padd) * .5);
	padding-left: var(--padd);
}
header .offer h2 {
	font-family: "Lato", sans-serif;
    font-weight: normal;
	font-size: 1.3em;
    text-transform: uppercase;
	line-height: 1.2em;
	letter-spacing: 0.1em;
}
header .offer h2 span{
	color: #B9A079;
}

main #quartier .content {
	padding: 7vw 0;
	background-color: #eeeeee;
	width: 75%;
}

@media (max-width: 768px) {
	header .offer {
		top: 68vw;
	}
	header .offer > div {
		padding-top: calc(var(--padd) * .3);
		padding-right: calc(var(--padd) * 1.3);
		padding-bottom: calc(var(--padd) * .3);
		padding-left: calc(var(--padd) * .3);
	}
	header .offer h2 {
		font-size: 1em;
	}
}

@media (min-width: 1024px) {
	header .baseline > div {
		padding-right: calc(var(--padd) * 3);
	}
	header .popup  {
		color: white;
		width: 8vw;
	    height: 8vw;
	    transform: translate(33.3%, 30%);
	}

	#informations {
		width: 55%;
	}

	.visu2 {
		background-size: cover !important;
	}

}

#prestations .background {
	padding-top: 56.25%;
}

header .popup  {
	color: white;
}
header .popup .fsize_sm {
	font-size: clamp(12px,0.8vw,20px);
}

#plus li {
	padding-left: 0.8em;
}

#plus h3 {
	padding-left: 0.5em;
	letter-spacing: 2px;
}

#addr h3 {
	padding-left: 0.5em;
	letter-spacing: 2px;
}

#gdp h3 {
	letter-spacing: 2px;
}

.disp_mobile {
	display: none;
}

#formulaire h2 {
		border-bottom: none;
		margin-bottom: 0;
	}

.plusinf {
	background-color: var(--cta-information)
}

@media (max-width: 1024px) {

	header .logos {
		padding-right: calc(var(--padd) * 1.5 );
		padding-left: calc(var(--padd) * 1 );
		padding-bottom: 10px;
		padding-top: 10px;

	}

	header .header_offres {

	    top: inherit;
	    right: inherit;
	    left: 4vw;
	    z-index: 1;
	    bottom: -15vw;
	}

	header .header_offres img {
	    width: 60%;
	    height: auto;
	}

	header .popup {
		left: -10px;
	}

	header .logos > img {
		width: auto;
		height: 22vw;
	}

	nav.active .logos span.upper {
		line-height: 22px;
	}

	header .baseline h1 strong {
		line-height: 1em;
	}

	#gdp h3 {
		display: block !important;
		visibility: visible;
		left: -15px;
	}

	#plus div {
		padding-left: var(--padd2d);
	}

	#plus .plus-img {
	    width: 75%;
	    margin: 5vw 0;
	}

	.disp_mobile {
		display: block;
	}

	.formLeads input {
		width: 100%;
	}

	.formLeads .title p {
		text-align: center;
	}

	footer .mentions p {
		margin-left: -5px;
	}

	#formulaire .btn {
		width: 60%;
		height: 50px;
		font-size: 4.5vw;
	}

	#cta {
		bottom: -3px;
		font-size: 5.5vw !important;
	}

	.formLeads {
		font-size: 100%;
	}

	#formulaire h2 {
		font-size: 6.5vw;
		padding-bottom: 3vw;
	}

	.visu2 {
		background-size: cover !important;
	}

	.formLeads {
		padding-top: 5vw;
	}

	.logos p {
		padding-bottom: 3vw;
	}

	footer .logos > span {
		top: -3em;
	}

}


/* ================================================================== */
/* ===============   SPÉCIFIQUE LANDING :: PULSE (69)   ============= */
/* ================================================================== */


/* ---------------   @NAVBAR  --------------- */

/* deux couleurs de boutons différentes dans la navbar (téléphone / être rappelé) */
nav .contact a.btn { background-color: var(--navbar-button); }
nav .contact span.btn { background-color: var(--navbar-button2); }


/* ---------------   @HEADER  --------------- */

/*
	Toutes les positions ci-dessous sont recalculées au pixel près depuis la maquette Figma
	(référence desktop 1920px de large) puis converties en vw, en repère "top" par rapport au
	haut du visuel (header), pour rester cohérentes quelle que soit la largeur d'écran.
*/

/* bandeau "LANCEMENT COMMERCIAL ..." :: couleur + repositionné juste au dessus du bloc baseline */
header .offer > div {
	background-color: var(--accent-lime);
}
header .offer h2 {
	color: var(--primary);
	font-weight: 900;
}
header .offer h2 span {
	color: var(--primary);
}
@media (min-width: 1025px) {
	header .offer {
		top: 28.7vw;
		bottom: auto;
	}
}

/*
	bloc baseline :: coin arrondi (au lieu du biseau générique).
	IMPORTANT : sa hauteur (auto, calculée sur le contenu) doit rester proche de celle de la
	maquette (~9vw) car le bandeau "LANCEMENT COMMERCIAL" est calé juste au-dessus, à une
	position fixe (top) : un bloc baseline trop haut remonte par dessus et masque le bandeau
	(z-index baseline > z-index offer). D'où l'interlignage resserré ci-dessous.
*/
header .baseline > div {
	/* -webkit-mask: unset; mask: unset; */
	/* border-top-right-radius: 4.5vw; */
	/* border-bottom-right-radius: 4.5vw; */
	padding-top: calc(var(--padd) * .5);
	padding-bottom: calc(var(--padd) * .55);
	padding-right: calc(var(--padd) * 4);
}
header .baseline h1 {
	margin-bottom: 0.25em;
}
header .baseline h1 strong {
	color: #fff;
	font-weight: 900;
	line-height: 1.15em;
	font-family: "hagrid", sans-serif;
}
header .baseline h2 {
	text-transform: none;
	font-weight: 500;
	margin: 0.35em 0 0;
}

/* logo programme :: fond blanc à coins arrondis, plaqué en haut du visuel (au lieu du biseau + décalage générique) */
header .logos {
	top: 1.2vw;
	transform: translateX(-50%);
	border-radius: 0 0 3.7vw 3.7vw;
	-webkit-mask: unset; mask: unset;
	padding: 1vw 1.5vw;
}
header .logos > img {
	width: 21vw;
	padding-top: 0;
}

/* patch d'offres (PTZ / ...) :: bas droite du visuel */
header .header_offres {
	top: auto;
    right: 5vw;
    left: auto;
    bottom: 1vw;
}

header .pictos {
    position: absolute;
    top: 5vw;
    left: 36vw;
    transform: translate(0, -50%);
}

header .pictos img {
	width: 6vw;
}
header .header_offres img {
	width: 33.7vw;
}

/* éléments décoratifs propres au visuel PULSE */
header .deco {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}
header .deco--top {
	top: 1.3vw;
	right: 15.7vw;
	width: 26.4vw;
}
header .deco--bottom {
	top: 20vw;
	left: 3.1vw;
	width: 29.9vw;
}

@media (min-width: 1025px) {
	#informations {
		width: 55%;
	}
}

@media (max-width: 1024px) {
	/* hauteur du bandeau teal (baseline) recalée sur la maquette mobile (au lieu du 55vw générique) */
	:root {
		--base: 58.9vw;
	}

	/* photo du header : ratio propre à la maquette mobile (au lieu du 80% générique) */
	#bg_header {
		padding-top: 77%;
	}

	/* logo programme : carte blanche en pilule (coins droits arrondis en plein), plaquée à
	   gauche, à cheval entre le bandeau teal et la photo — au lieu du centrage type desktop */
	header .logos {
		top: 41vw;
		left: 0;
		transform: none;
		width: 38vw;
		height: 28.8vw;
		justify-content: flex-start;
		border-radius: 0 999px 999px 0;
		padding: 0 0 0 1.5vw;
	}
	header .logos > img {
		width: 22vw;
		height: auto;
	}

	header .logo-onora {
		width: 30vw;
		height: auto;
		position: absolute;
		left: 8vw;
		top: 33vw;
		z-index: 1;
	}

	header .pictos img {
    	width: 21vw;
	}

	header .pictos {
		position: absolute;
		top: 45vw;
		left: 60vw;
		transform: translate(0, -50%);
	}

	/* bandeau "LANCEMENT COMMERCIAL ..." : pleine largeur, coins arrondis en haut seulement,
	   calé au bas de la photo (au lieu du biseau + position desktop) */
	header .offer {
		top: 123.2vw;
		left: 0;
		width: 100%;
	}
	header .offer > div {
		width: 100%;
		mask: unset; -webkit-mask: unset;
		border-radius: 6.7vw 6.7vw 0 0;
		padding: 3.5vw var(--padd2d);
	}
	header .offer h2 {
		font-size: 4vw;
		text-align: center;
	}

	/* patch d'offres : 3 arches en haut à droite de la photo (au lieu du bas droite desktop) */
	header .header_offres {
		top: 114.5vw;
        left: auto;
        right: 5vw;
        bottom: auto;
        width: 90vw;
	}
	header .header_offres img {
		width: 100%;
	}

	nav .contact a.btn, nav .contact span.btn {
    	background-color: #7C9B92;
	}

	/* évite qu'une case à cocher masquée (opacity:0) n'élargisse la page en pleine largeur
	   et ne crée un scroll horizontal (la règle générique .formLeads input{width:100%}
	   du gabarit s'applique par erreur aussi aux inputs checkbox/radio) */
	.formLeads .markus_radio input {
		width: max(1.5vw, 20px);
	}

	/* décors "bulles"/"arches" desktop absents de la maquette mobile */
	header .deco {
		display: none;
	}

	/* bloc baseline : rectangle plein (pas d'arrondi ni de padding desktop) */
	header .baseline > div {
		border-radius: 0;
		height: 43vw;
		padding: 0 var(--padd2d) calc(var(--padd) * 1.5);
	}
	header .baseline h1 strong {
		line-height: 1.3em;
	}
	header .baseline h2 {
		margin-top: 0.4em;
	}

	/* CTA flottant "plus d'informations" : coins arrondis en haut seulement + ombre portée */
	#cta {
		border-radius: 5px 5px 0 0;
		box-shadow: 10px 5px 4px 0 rgba(43, 43, 43, .27);
	}
}


/* ---------------    @RDV    --------------- */

/* bloc "rendez-vous" :: reprend le gabarit d'étiquette h3, agrandi et coloré */
#rdv .rdv-box {
	display: block;
	width: fit-content;
	max-width: 32vw;
	margin: 0;
	padding: var(--padd2d) calc(var(--padd) * 1.5) var(--padd2d) var(--padd2d);
	background-color: var(--accent-lime);
	color: var(--primary);
	font-weight: 700;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='159' height='36' viewBox='0 0 159 36'%3E%3Cpath d='M0,0H159l-4.9,36H0Z' fill='%23181730'/%3E%3C/svg%3E") no-repeat right/cover;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='159' height='36' viewBox='0 0 159 36'%3E%3Cpath d='M0,0H159l-4.9,36H0Z' fill='%23181730'/%3E%3C/svg%3E") no-repeat right/cover;
}
#rdv h3 { letter-spacing: 2px; }

@media (max-width: 1024px) {
	#rdv .rdv-box {
		max-width: 100%;
	}
}


/* ---------------   @FOOTER  --------------- */

footer {
	background-color: #E5EAE9;
}


/* ---------------   @FORMULAIRE :: fix iOS Safari  --------------- */

/*
	Bug iOS Safari uniquement (OK sur Android/Chrome) : le pseudo-élément ::before qui affiche
	le placeholder du input[type=date] (cf 2022_template_public/css/style.css) est pris en compte
	dans le calcul de la largeur "min-content" de l'input sous iOS. Comme la grille
	#container_date > div est définie en `47.5% 47.5%` (sans minmax), les colonnes s'élargissent
	pour contenir ce contenu généré et débordent sur toute la largeur disponible.
*/
#container_date > div {
	grid-template-columns: minmax(0, 47.5%) minmax(0, 47.5%);
}
#container_date label,
#container_date input,
#container_date select,
input[name="date"] {
	min-width: 0;
	max-width: 100%;
}
input[type="date"]::before {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}