/* =========================================================
   Groupe Périer — thème natif (sans Elementor)
   ========================================================= */

:root {
	--gp-burgundy: #6e1c3a;
	--gp-burgundy-dark: #4c1329;
	--gp-burgundy-darker: #330c1a;
	--gp-dark: #1f2229;
	--gp-dark-2: #16181d;
	--gp-text: #2b2b2e;
	--gp-text-light: #6b6b70;
	--gp-off-white: #f7f5f2;
	--gp-white: #ffffff;
	--gp-font-heading: 'Oswald', 'Arial Narrow', sans-serif;
	--gp-font-body: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
	--gp-radius: 6px;
	--gp-container: 1180px;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--gp-font-body);
	color: var(--gp-text);
	background: var(--gp-white);
	font-size: 16px;
	line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 800; }
button { font-family: inherit; cursor: pointer; }

.gp-container {
	max-width: var(--gp-container);
	margin: 0 auto;
	padding: 0 24px;
}

.gp-section { padding: 90px 0; }
@media (max-width: 782px) {
	.gp-section { padding: 56px 0; }
}

.gp-eyebrow {
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--gp-burgundy);
	margin: 0 0 6px;
}
.gp-eyebrow--light { color: rgba(255,255,255,0.85); }

.gp-heading {
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	font-weight: 500;
	font-size: clamp(1.6rem, 3vw, 2.35rem);
	line-height: 1.25;
	margin: 0 0 20px;
	letter-spacing: 0.01em;
}
.gp-heading strong { font-weight: 700; }
.gp-heading--light { color: var(--gp-white); }
.gp-heading--sm { font-size: 1.5rem; margin-bottom: 12px; }

.gp-rule {
	display: block;
	width: 52px;
	height: 3px;
	background: var(--gp-burgundy);
	margin: 0 0 22px;
}
.gp-rule--light { background: rgba(255,255,255,0.85); }

.gp-btn {
	display: inline-block;
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	padding: 15px 34px;
	border-radius: 999px;
	background: var(--gp-burgundy);
	color: var(--gp-white);
	border: 1px solid transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gp-btn:hover { background: var(--gp-burgundy-dark); color: var(--gp-white); }
.gp-btn--pill { border-radius: 999px; }

.gp-card {
	background: var(--gp-white);
	border-radius: var(--gp-radius);
	padding: 40px;
	box-shadow: 0 20px 45px rgba(20, 10, 15, 0.12);
}
.gp-card--dark {
	background: rgba(22, 24, 29, 0.92);
	color: var(--gp-white);
}

/* =========================================================
   HEADER
   ========================================================= */
.gp-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 40;
	padding: 28px 0;
	background: linear-gradient(180deg, rgba(15,15,17,0.55) 0%, rgba(15,15,17,0) 100%);
}
.gp-header.is-open { background: var(--gp-dark); padding-bottom: 20px; }
body:not(.home) .gp-header { position: relative; background: var(--gp-dark); }
.gp-header__inner {
	max-width: var(--gp-container);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.gp-header__logo img { height: 84px; width: auto; }

.gp-header__nav { flex: 1; display: flex; justify-content: center; }
.gp-nav-menu { display: flex; gap: 34px; }
.gp-nav-menu a {
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--gp-white);
	opacity: 0.9;
}
.gp-nav-menu a:hover { opacity: 1; text-decoration: underline; }

.gp-header__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--gp-white);
	text-align: center;
	flex-shrink: 0;
}
.gp-header__contact-icon { width: 46px; height: 46px; }
.gp-header__contact-icon img { width: 100%; height: 100%; object-fit: contain; }
.gp-header__contact-icon svg { width: 100%; height: 100%; color: var(--gp-white); }
.gp-header__contact-label {
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.gp-header__burger {
	display: none;
	background: none;
	border: none;
	width: 40px; height: 40px;
	color: var(--gp-white);
	padding: 6px;
}
.gp-header__burger svg { width: 100%; height: 100%; }

.gp-header__mobile { display: none; }

@media (max-width: 900px) {
	.gp-header__nav { display: none; }
	.gp-header__burger { display: block; }
	.gp-header__contact-label { display: none; }
	.gp-header__mobile {
		display: none;
		flex-direction: column;
		gap: 18px;
		background: var(--gp-dark);
		padding: 24px;
		margin-top: 16px;
		border-radius: var(--gp-radius);
	}
	.gp-header.is-open .gp-header__mobile { display: flex; }
	.gp-nav-menu--mobile { flex-direction: column; gap: 14px; }
	.gp-header__mobile .gp-btn { text-align: center; }
}

/* =========================================================
   HERO
   ========================================================= */
.gp-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	color: var(--gp-white);
}
.gp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,20,22,0.55) 0%, rgba(20,20,22,0.35) 45%, rgba(20,20,22,0.85) 100%);
}
.gp-hero__content {
	position: relative;
	z-index: 2;
	max-width: var(--gp-container);
	margin: 0 auto;
	padding: 160px 24px 0;
	width: 100%;
}
.gp-hero__title {
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	font-weight: 600;
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	line-height: 1.15;
	margin: 6px 0 60px;
	max-width: 780px;
}
.gp-hero__sub { padding-bottom: 46px; }
.gp-hero__subtitle {
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	margin: 2px 0 18px;
}
.gp-hero__subtitle strong { font-weight: 700; }

@media (max-width: 782px) {
	.gp-hero { min-height: 100vh; }
	.gp-hero__content { padding-top: 130px; }
	.gp-hero__title { margin-bottom: 40px; }
}

/* =========================================================
   BANDE INTRO BORDEAUX
   ========================================================= */
.gp-intro-band {
	background: var(--gp-burgundy);
	color: rgba(255,255,255,0.95);
	padding: 46px 0;
}
.gp-intro-band__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 50px;
	align-items: center;
}
.gp-intro-band__divider {
	width: 1px;
	align-self: stretch;
	background: rgba(255,255,255,0.35);
}
.gp-intro-band__col p { font-size: 1rem; }

@media (max-width: 782px) {
	.gp-intro-band__grid { grid-template-columns: 1fr; gap: 24px; }
	.gp-intro-band__divider { display: none; }
}

/* =========================================================
   OFFRE GLOBALE
   ========================================================= */
.gp-section__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.gp-section__head .gp-eyebrow { text-align: center; }

.gp-offer__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 50px;
	align-items: start;
}
.gp-offer__media { position: relative; }
.gp-offer__media img:first-child {
	border-radius: var(--gp-radius);
	box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}
.gp-offer__media-secondary {
	position: absolute;
	right: -8%;
	bottom: -12%;
	width: 62%;
	border: 6px solid var(--gp-white);
	border-radius: var(--gp-radius);
	box-shadow: 0 18px 34px rgba(0,0,0,0.22);
}
.gp-offer__text { margin-top: 40px; }
.gp-offer__text p { color: var(--gp-text); }
.gp-offer__logos {
	display: flex;
	align-items: center;
	gap: 34px;
	margin-top: 28px;
	flex-wrap: wrap;
}
.gp-offer__logos img { height: 34px; width: auto; opacity: 0.85; }

@media (max-width: 900px) {
	.gp-offer__grid { grid-template-columns: 1fr; }
	.gp-offer__media { margin-bottom: 70px; }
}

/* =========================================================
   BANDE PHOTO + BOUTONS
   ========================================================= */
.gp-brands-band {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: 130px 0 90px;
}
.gp-brands-band__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15,15,17,0.35) 0%, rgba(15,15,17,0.75) 100%);
}
.gp-brands-band__buttons {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
@media (max-width: 782px) {
	.gp-brands-band { background-attachment: scroll; padding: 90px 0 70px; }
}

/* =========================================================
   STATS
   ========================================================= */
.gp-stats { background: var(--gp-burgundy); color: var(--gp-white); padding: 56px 0; }
.gp-stats__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
	text-align: center;
}
.gp-stat__icon { display: inline-flex; width: 58px; height: 58px; margin-bottom: 14px; color: var(--gp-white); }
.gp-stat__icon img { width: 100%; height: 100%; object-fit: contain; }
.gp-stat__icon svg { width: 100%; height: 100%; }
.gp-stat__value {
	font-family: var(--gp-font-heading);
	font-weight: 700;
	font-size: 1.7rem;
	margin: 2px 0;
	letter-spacing: 0.01em;
}
.gp-stat__value--small { font-size: 1.15rem; text-transform: uppercase; }
.gp-stat__label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.92; margin: 0; }

@media (max-width: 900px) {
	.gp-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
}
@media (max-width: 480px) {
	.gp-stats__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   CONFIEZ-NOUS VOS RÊVES D'ÉVASION
   ========================================================= */
.gp-evasion__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}
.gp-evasion__panel {
	position: relative;
	background-size: cover;
	background-position: center;
	border-radius: var(--gp-radius);
	overflow: hidden;
	padding: 54px 50px;
	color: var(--gp-white);
}
.gp-evasion__panel-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(115deg, rgba(15,10,8,0.92) 30%, rgba(15,10,8,0.55) 100%);
}
.gp-evasion__panel-content { position: relative; z-index: 2; max-width: 460px; }
.gp-evasion__panel-content p { color: rgba(255,255,255,0.92); }
.gp-evasion__panel-content .gp-btn { margin-top: 16px; }

.gp-evasion__media {
	margin-left: -60px;
	position: relative;
	z-index: 1;
}
.gp-evasion__media img {
	border-radius: var(--gp-radius);
	box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}

@media (max-width: 900px) {
	.gp-evasion__grid { grid-template-columns: 1fr; }
	.gp-evasion__media { margin-left: 0; margin-top: -40px; padding: 0 20px; }
	.gp-evasion__panel { padding: 44px 28px; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.gp-contact {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 100px 0;
}
.gp-contact__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18,19,23,0.85) 0%, rgba(18,19,23,0.7) 100%);
}
.gp-contact__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 60px;
}
.gp-contact__form { padding: 44px; }

/* =========================================================
   FORMULAIRE DE CONTACT (v1.2.2)
   CSS fourni par le client (classe .form-perier), dédoublonné.
   Le thème enveloppe automatiquement le formulaire dans
   <div class="form-perier"> (voir functions.php).
   ========================================================= */
.gp-contact__form {
	padding: 40px 42px 44px;
	background: rgba(24, 26, 32, 0.94);
}
.gp-contact__form .gp-heading { margin-bottom: 14px; font-weight: 300; }
.gp-contact__form .gp-heading strong { font-weight: 700; }
.gp-contact__form .gp-rule { margin-bottom: 26px; }

.gp-form-placeholder {
	border: 1px dashed rgba(255,255,255,0.4);
	border-radius: var(--gp-radius);
	padding: 24px;
	font-size: 0.92rem;
	color: rgba(255,255,255,0.85);
}
.gp-form-placeholder p:first-child { margin-bottom: 8px; }

.form-perier label {
  padding: 8px 0px 5px 0px !important;
  color: #fff !important;
  font-size: 14px !important;
  letter-spacing: 1px;
  font-weight: 600;
}

.wpcf7-form-control-wrap {
  position: relative;
}

.form-perier input[type="date"],
.form-perier input[type="email"],
.form-perier input[type="number"],
.form-perier input[type="password"],
.form-perier input[type="search"],
.form-perier input[type="tel"],
.form-perier input[type="text"],
.form-perier input[type="url"],
.form-perier select,
.form-perier textarea {
  width: 100%;
  border: 1px solid #666;
  border-radius: 3px;
  padding: .5rem 1rem;
  transition: all .3s;
}

.form-perier input, .form-perier select, .form-perier textarea {
  color: #999 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  margin: 0 0 5px 0 !important;
}

.form-perier label,
.form-perier input,
.form-perier select,
.form-perier textarea {
  font-family: var(--gp-font-body);
}

.form-perier textarea {
  overflow: auto;
  resize: vertical;
  border: 1px solid #666;
  border-radius: 3px;
  padding: .5rem 1rem;
  transition: all .3s;
}

/* --- Bouton de validation (CSS fourni par le client) --- */
.form-perier .bouton-form:hover, .form-perier .wpcf7-submit:hover {
  color: #6E0A39 !important;
  background-color: #fff !important;
}
[type="button"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
  cursor: pointer;
}

[type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover {
  color: #fff;
  background-color: #c36;
  text-decoration: none;
}
.form-perier .bouton-form, .form-perier .wpcf7-submit {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  width: 100% !important;
  background-color: #6e0a39 !important;
  margin-top: 12px !important;
  border: none !important;
  padding: 12px 0px !important;
  border-radius: 20px !important;
}
/* Garde-fou : la règle globale button:hover ci-dessus ne doit pas
   colorer le bouton du menu mobile */
.gp-header__burger:hover, .gp-header__burger:focus { background: none; color: var(--gp-white); }

/* --- Compléments (hors CSS fourni) --- */
/* Messages CF7 lisibles sur fond sombre */
.form-perier .wpcf7-not-valid-tip { color: #ffb3c8; font-size: 0.85rem; }
.form-perier .wpcf7-response-output {
	color: #fff;
	border-color: rgba(255,255,255,0.4) !important;
	border-radius: 6px;
}

.gp-contact__directory { display: flex; flex-direction: column; gap: 46px; color: var(--gp-white); }
.gp-directory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 12px; }
.gp-directory-grid h4 {
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.95rem;
	margin: 18px 0 10px;
}
.gp-directory-grid h4:first-child { margin-top: 0; }
.gp-directory-grid li { padding: 4px 0; }
.gp-directory-grid a { color: rgba(255,255,255,0.78); }
.gp-directory-grid a:hover { color: var(--gp-white); text-decoration: underline; }
.gp-directory-grid li:not(:has(a)) { color: rgba(255,255,255,0.6); }

.footer-widget-title {
	font-family: var(--gp-font-heading);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.95rem;
	margin: 18px 0 10px;
}
.gp-contact__directory a { color: rgba(255,255,255,0.78); }
.gp-contact__directory a:hover { color: var(--gp-white); text-decoration: underline; }

@media (max-width: 900px) {
	.gp-contact__grid { grid-template-columns: 1fr; }
	.gp-contact__form { padding: 30px 24px; }
	.gp-directory-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.gp-directory-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.gp-footer__bottom { background: var(--gp-dark-2); padding: 26px 0; }
.gp-footer__inner {
	max-width: var(--gp-container);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}
.gp-footer__logo img { height: 90px; width: auto; }
.gp-footer__copy { color: rgba(255,255,255,0.65); font-size: 0.85rem; margin: 0; }
.gp-footer__copy a { color: rgba(255,255,255,0.8); }
.gp-footer__copy a:hover { color: var(--gp-white); text-decoration: underline; }
.gp-footer-menu { display: inline-flex; gap: 6px; }
.gp-footer-menu li:not(:last-child)::after { content: '|'; margin: 0 6px; color: rgba(255,255,255,0.4); }

.gp-back-to-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	width: 52px;
	height: 52px;
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: 60;
}
.gp-back-to-top img { width: 100%; height: 100%; object-fit: contain; }
.gp-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* =========================================================
   Pages génériques (fallback index.php / page.php / single.php)
   ========================================================= */
.gp-simple-content { padding: 160px 0 90px; max-width: 820px; }
.gp-entry-content { font-size: 1.02rem; }
.gp-entry-content h2, .gp-entry-content h3 { font-family: var(--gp-font-heading); text-transform: uppercase; }
.gp-entry-thumb { margin-bottom: 30px; border-radius: var(--gp-radius); overflow: hidden; }

/* Accessibilité : focus visible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--gp-burgundy);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.gp-back-to-top { transition: none; }
}

/* =========================================================
   ANIMATIONS (v1.1.0)
   ========================================================= */

@keyframes gp-rise {
	from { opacity: 0; transform: translateY(34px); }
	to   { opacity: 1; transform: none; }
}
@keyframes gp-grow {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
.gp-hero__content > .gp-eyebrow { animation: gp-rise 0.9s cubic-bezier(.2,.7,.2,1) 0.15s both; }
.gp-hero__title                 { animation: gp-rise 1s   cubic-bezier(.2,.7,.2,1) 0.35s both; }
.gp-hero__sub                   { animation: gp-rise 1s   cubic-bezier(.2,.7,.2,1) 0.75s both; }
.gp-hero__sub .gp-rule          { transform-origin: left; animation: gp-grow 0.8s ease 1.4s both; }
.gp-header                      { animation: gp-rise 0.8s ease 0.05s both; }

.js [data-anim] {
	opacity: 0;
	transition: opacity 0.85s ease, transform 0.85s cubic-bezier(.2,.7,.2,1);
	transition-delay: var(--gp-delay, 0ms);
	will-change: opacity, transform;
}
.js [data-anim="fade-up"]    { transform: translateY(44px); }
.js [data-anim="fade-left"]  { transform: translateX(60px); }
.js [data-anim="fade-right"] { transform: translateX(-60px); }
.js [data-anim="zoom-in"]    { transform: scale(0.85); }
.js [data-anim].is-in        { opacity: 1; transform: none; }

.js .gp-btn[data-anim] {
	transition: opacity 0.85s ease var(--gp-delay, 0ms),
	            transform 0.85s cubic-bezier(.2,.7,.2,1) var(--gp-delay, 0ms),
	            background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gp-btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	.gp-header,
	.gp-hero__content > .gp-eyebrow,
	.gp-hero__title,
	.gp-hero__sub,
	.gp-hero__sub .gp-rule { animation: none; }
	.js [data-anim] { opacity: 1; transform: none; transition: none; }
	.gp-btn:hover { transform: none; }
}

@media (max-width: 600px) {
	.gp-contact__form { padding: 30px 22px 34px; }
}
