/* |------------ GLOBAL ------------- | */
:root {
	--blue:#29458f;
	--yellow:#fdc303;
	--text:#111111;
	--white:#ffffff;
}

body {
	background:var(--white);
	color:var(--text);
	font-family:"Noto Sans", Arial, sans-serif;
}
/* ==========================================================
   HERO
   ========================================================== */

.hero {
	width:100%;
	background:#ffffff;
}

/* ----------------------------------------------------------
   Bandeau jaune
   ---------------------------------------------------------- */

.hero__top {
	position:relative;
	background:#fbc300;
}

.hero__top-inner {
	position:relative;
	width:100%;
	min-height:28px;
	margin:0 auto;
}

.hero__top-title {
	margin:0;
	padding:4px 90px 4px 20px;
	font-family:"Bebas Neue", Arial, sans-serif;
	font-size:18px;
	font-weight:400;
	line-height:20px;
	text-align:center;
	text-transform:uppercase;
}

.hero__flag {
	position:absolute;
	z-index:2;
	top:0;
	right:16px;
	width:70px;
	height:auto;
	transform:translateY(-1px);
	filter:drop-shadow(0 4px 3px rgba(0, 0, 0, .35));
}

/* ----------------------------------------------------------
   Texte d’introduction
   ---------------------------------------------------------- */

.hero__intro {
	max-width:900px;
	margin:0 auto;
	padding:6px 20px 7px;
	font-size:13px;
	line-height:1.35;
	text-align:center;
}

/* ----------------------------------------------------------
   Bandeau gris de contact
   ---------------------------------------------------------- */

.hero__contact {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:38px;
	background:#d2d2d2;
}

.hero__contact-inner {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
}

/* ----------------------------------------------------------
   CTA Parler de votre projet
   ---------------------------------------------------------- */

.hero__project-link {
	display:inline-flex;
	align-items:center;
	color:#222222;
	font-family:"Bebas Neue", Arial, sans-serif;
	font-size:17px;
	line-height:1;
	text-decoration:none;
	text-transform:uppercase;
}

.hero__project-icon {
	position:relative;
	z-index:2;
	display:flex;
	flex:0 0 auto;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:50%;
	background:#3bd17f;
}

.hero__project-icon img {
	display:block;
	width:20px;
	height:20px;
	object-fit:contain;
}

.hero__project-text {
	display:flex;
	align-items:center;
	min-height:30px;
	margin-left:-8px;
	padding:4px 10px 0 14px;
	border:2px solid #3bd17f;
	border-radius:0 8px 8px 0;
	background:#ffffff;
	white-space:nowrap;
}

.hero__phone {
	color:#222222;
	font-family:"Bebas Neue", Arial, sans-serif;
	font-size:17px;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
}

/* ----------------------------------------------------------
   Logo
   ---------------------------------------------------------- */

.hero__logo {
	display:block;
	width:min(330px, 65%);
	height:auto;
	margin:14px auto 24px;
}
/* |------------ DESKTOP ------------- | */
@media (min-width:900px) {
	/*.hero__top-inner {
		min-height:44px;
	}*/

	.hero__top-title {
		max-width:900px;
		margin:0 auto;
		padding:4px 52px 4px 18px;
		font-size:17px;
		line-height:24px;
	}

	.hero__flag {
		top:0;
		right:8px;
		width:58px;
		/*transform:translateY(2px);*/
	}

	.hero__intro {
		max-width:900px;
		padding:10px 0;
		font-size:14px;
		line-height:1.25;
	}

	.hero__contact {
		min-height:36px;
		padding:0 8px;
	}

	.hero__contact-inner {
		gap:5px;
	}

	.hero__project-link {
		font-size:16px;
	}

	.hero__project-icon {
		width:34px;
		height:34px;
	}

	.hero__project-icon img {
		width:18px;
		height:18px;
	}

	.hero__project-text {
		min-height:28px;
		padding-right:8px;
		padding-left:13px;
	}

	.hero__phone {
		font-size:16px;
	}

	.hero__logo {
		width:min(290px, 75%);
		margin-top:20px;
	}
}
/* |------------ MOBILE ------------- | */
@media (min-width:396px) and (max-width:767px) {
	.hero__intro {
		padding-top: 20px; 
	}
}
@media (max-width:395px) {
	.hero__intro {
		/* padding-top: 20px; */
	}
}
/* ==========================================================
   PAGE DE REMERCIEMENT
   ========================================================== */

.thank-you-page {
    display:grid;
    min-height:62vh;
    /* padding:70px 20px; */
	padding-top: 70px;
    background:#f2f2f2;
    /*place-items:center;*/
	justify-items: center;
	align-items: start;
}

.thank-you-card {
    width:min(100%, 720px);
    padding:42px;
    border-top:7px solid #fbc300;
    background:#ffffff;
    box-shadow:0 18px 45px rgba(5, 35, 93, .14);
    text-align:center;
}

.thank-you-card__eyebrow {
    margin:0 0 8px;
    color:#29458f;
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.thank-you-card__title {
    margin:0;
    color:#05235d;
    font-family:"Bebas Neue", Arial, sans-serif;
    font-size:clamp(42px, 8vw, 68px);
    font-weight:400;
    line-height:1;
    text-transform:uppercase;
}

.thank-you-card__text {
    max-width:560px;
    margin:22px auto 28px;
    color:#353535;
    line-height:1.6;
}

.thank-you-card__link {
    display:inline-block;
    padding:13px 24px 10px;
    background:#29458f;
    color:#ffffff;
    font-family:"Bebas Neue", Arial, sans-serif;
    font-size:24px;
    line-height:1;
    text-decoration:none;
    text-transform:uppercase;
}

.thank-you-card__link:hover,
.thank-you-card__link:focus-visible {
    background:#1e3470;
}

@media (max-width:600px) {
    .thank-you-page {
        padding:45px 20px;
    }

    .thank-you-card {
        padding:32px 22px;
    }
}