/* ═════════════════════════════════════════════════════════════════
   Ophtapod : styles globaux
   Tokens de design centralisés dans :root. Tout CSS de template lit
   ces variables, jamais de valeur dupliquée.
   ═════════════════════════════════════════════════════════════════ */

:root {
	/* Palette */
	--c-navy:        #15273F; /* Bleu nuit : titres, textes forts */
	--c-navy-footer: #16314F; /* Bleu nuit : fond footer */
	--c-navy-deep:   #132C47; /* Bleu nuit foncé : bouton haut de page, dégradé wordmark */
	--c-blue-pale:   #F0F5F7; /* Bleu très clair : fond de section alterné */
	--c-white:       #FFFFFF;
	--c-offwhite:    #F9FCFF; /* Blanc cassé : texte sur fond sombre ou photo */
	--c-gray:        #797B7E; /* Gris : texte courant */
	--c-gray-light:  #DADEE3; /* Gris clair : bordures, séparateurs */
	--c-blue-sep:    #233F5C; /* Bleu : séparateurs footer */
	--c-gold:        #DEAC17; /* Or : accent, liens, chiffres */
	--c-gold-light:  #FDF685; /* Or clair : fin du dégradé */
	--c-red:         #E4354A; /* Rouge : mentions requises, service d'urgence (page Services) */
	--c-red-light:   #EB6877; /* Rouge clair : cercle d'icône du service d'urgence */
	--c-blue-grad:   #4A74A2; /* Bleu clair : dégradé wordmark footer */

	/* Dégradés dorés (angles relevés sur le site en production) */
	--grad-gold:        linear-gradient(210deg, var(--c-gold) 0%, var(--c-gold-light) 100%);
	--grad-gold-header: linear-gradient(156deg, var(--c-gold) 0%, var(--c-gold-light) 100%);
	--grad-gold-card:   linear-gradient(132deg, var(--c-gold) 0%, var(--c-gold-light) 100%);

	/* Typographie */
	--font-title: 'Rethink Sans', 'DM Sans', system-ui, sans-serif;
	--font-body:  'DM Sans', system-ui, sans-serif;

	/* Grille */
	--container:  1100px;
	--section-px: 70px;
	--gutter:     30px;
}

/* ── Base ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Toutes les tailles de police du thème sont en rem, calées sur cette base
   (100 % = 16px par défaut). Deux conséquences voulues : la préférence de
   taille de texte du navigateur est respectée, et le module d'accessibilité
   met tout le texte à l'échelle en changeant cette seule valeur.
   Un nouveau modèle de page doit donc écrire ses tailles en rem, jamais en px. */
html {
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.625rem;
	color: var(--c-gray);
	background: var(--c-white);
}

img {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 500;
	color: var(--c-navy);
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--c-gold);
	text-decoration: none;
	transition: color 0.3s, opacity 0.3s;
}

a:hover {
	opacity: 0.8;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--c-white);
	color: var(--c-navy);
	border-radius: 30px;
}

:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

.op-container {
	max-width: min(100%, var(--container));
	margin-inline: auto;
}

/* ── Boutons ──────────────────────────────────────────────────────── */

.op-btn {
	display: inline-block;
	padding: 18px 40px;
	border: 0;
	border-radius: 30px;
	background: var(--grad-gold);
	font-family: var(--font-title);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--c-navy);
	cursor: pointer;
	transition: color 0.5s, opacity 0.5s, background-color 0.5s;
}

.op-btn:hover {
	opacity: 0.85;
	color: var(--c-navy);
}

.op-btn--small {
	padding: 10px 24px;
}

.op-btn--header {
	padding: 12px 17px;
	background: var(--grad-gold-header);
}

/* ── Animations d'apparition ─────────────────────────────────────────
   Deux animations, déclenchées à l'entrée dans le viewport
   (IntersectionObserver, une seule fois). Délais via data-delay. */

.anim-fade,
.anim-fade-up {
	transition: opacity 1s ease, transform 1s ease;
	will-change: opacity, transform;
}

/* L'état masqué n'existe que si le JS tourne (classe op-js posée dans wp_head) :
   sans JS, la page reste entièrement visible. */
.op-js .anim-fade,
.op-js .anim-fade-up {
	opacity: 0;
}

.op-js .anim-fade-up {
	transform: translateY(40px);
}

.anim-fade.is-visible,
.anim-fade-up.is-visible {
	opacity: 1;
	transform: none;
}

@keyframes op-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.anim-fade,
	.anim-fade-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Header desktop ───────────────────────────────────────────────── */

.op-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 8000;
	padding: 35px var(--section-px) 0;
	background: transparent;
	animation: op-fade-in 1s ease both;
}

.op-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gutter);
}

.op-header__branding img,
.op-header-mobile__branding img,
.op-footer__logo img {
	display: block;
	width: 102px;
	height: 88px;
	object-fit: contain;
}

.op-site-title {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 1.75rem;
	background: var(--grad-gold-header);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.op-header__nav > ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 4px 1px;
	list-style: none;
	background: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 30px;
	height: 50px;
}

.op-header__nav li {
	position: relative;
}

.op-header__nav li > a {
	display: flex;
	align-items: center;
	height: 42px;
	padding: 0 15px;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--c-gray);
	border-radius: 30px;
	transition: color 0.3s, background-color 0.3s;
}

.op-header__nav li > a:hover {
	color: var(--c-navy);
	opacity: 1;
}

.op-header__nav li.current-menu-item > a,
.op-header__nav li.current_page_item > a {
	background: var(--c-white);
	color: var(--c-navy);
}

/* Chevron de l'item à sous-menu */
.op-header__nav li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

/* Sous-menu au survol */
.op-header__nav li > ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	margin: 0;
	padding: 13px 0;
	list-style: none;
	background: var(--c-white);
	border-radius: 0;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.op-header__nav li:hover > ul.sub-menu,
.op-header__nav li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
}

.op-header__nav ul.sub-menu li > a {
	height: auto;
	padding: 8px 20px;
	border-radius: 0;
}

.op-header__nav ul.sub-menu li > a:hover {
	color: var(--c-gold);
}

/* ── Header mobile ────────────────────────────────────────────────── */

.op-header-mobile {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.06);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 8000;
}

.op-burger {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.op-burger__line {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--c-navy);
	transition: transform 0.3s, opacity 0.3s;
}

body.op-home .op-burger__line {
	background: var(--c-offwhite);
}

.op-mobile-panel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(85vw, 360px);
	z-index: 9000;
	padding: 24px;
	background: var(--c-white);
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}

.op-mobile-panel.is-open {
	transform: translateX(0);
}

.op-mobile-panel__close {
	display: block;
	margin: 0 0 24px auto;
	padding: 10px 18px;
	background: var(--c-blue-pale);
	border: 0;
	border-radius: 30px;
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--c-navy);
	cursor: pointer;
}

.op-mobile-panel__nav ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.op-mobile-panel__nav li > a {
	display: block;
	padding: 12px 0;
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--c-navy);
	border-bottom: 1px solid var(--c-gray-light);
}

.op-mobile-panel__nav ul.sub-menu {
	margin: 0;
	padding-left: 16px;
}

.op-mobile-panel__nav ul.sub-menu li > a {
	font-size: 1.0625rem;
	color: var(--c-gray);
}

/* ── Pages internes (hors modèle Accueil) ─────────────────────────── */

body.op-inner .op-header {
	position: static;
	background: var(--c-blue-pale);
	padding-bottom: 20px;
}

body.op-inner .op-header-mobile {
	position: static;
	background: var(--c-blue-pale);
}

.op-inner-page {
	max-width: min(100%, var(--container));
	margin-inline: auto;
	padding: 80px 20px 120px;
}

.op-inner-page .entry-title,
.op-inner-page .page-title {
	font-size: 2.9375rem;
	line-height: 3.125rem;
	margin-bottom: 30px;
}

.op-inner-page .entry-meta {
	margin-bottom: 24px;
	font-size: 1rem;
	color: var(--c-gray);
}

.op-inner-page .entry-content a {
	color: var(--c-gold);
}

.op-post-card {
	padding: 40px 0;
	border-bottom: 1px solid var(--c-gray-light);
}

.op-post-card .entry-title {
	font-size: 1.75rem;
	line-height: 1.2;
	margin-bottom: 8px;
}

.op-post-card .entry-title a {
	color: var(--c-navy);
}

/* ── Footer ───────────────────────────────────────────────────────── */

.op-footer {
	background: var(--c-navy-footer);
	padding: 110px var(--section-px) 60px;
	overflow: hidden;
}

.op-footer__main {
	display: flex;
	max-width: min(100%, 1215px);
	margin-inline: auto;
	min-height: 505px;
	border-bottom: 1px solid var(--c-blue-sep);
}

.op-footer__left {
	flex: 1 1 814px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding-right: 47px;
	padding-bottom: 50px;
}

.op-footer__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 2.9375rem;
	line-height: 3.125rem;
	letter-spacing: -0.01em;
	color: var(--c-offwhite);
}

.op-footer__baseline {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	font-size: 1rem;
	line-height: 1.625rem;
	color: var(--c-offwhite);
}

.op-footer__baseline a {
	color: var(--c-gold);
}

.op-footer__right {
	flex: 0 0 401px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	border-left: 1px solid var(--c-blue-sep);
	padding-left: 47px;
	padding-bottom: 50px;
}

.op-footer__cols {
	display: flex;
	gap: var(--gutter);
}

.op-footer__col {
	flex: 1;
}

.op-footer__col-title {
	font-size: 1.4375rem;
	line-height: 1.75rem;
	color: var(--c-offwhite);
	margin-bottom: 18px;
}

.op-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.op-footer__col li {
	margin-bottom: 8px;
}

.op-footer__col a {
	color: var(--c-offwhite);
	font-size: 1rem;
	line-height: 1.625rem;
}

.op-footer__col a:hover {
	color: var(--c-gold);
	opacity: 1;
}

.op-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.op-footer__social {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 16px;
	border: 1px solid var(--c-offwhite);
	border-radius: 20px;
	background: transparent;
	font-size: 1rem;
	color: var(--c-offwhite);
}

.op-footer__social:hover {
	color: var(--c-gold);
	border-color: var(--c-gold);
	opacity: 1;
}

.op-footer__wordmark {
	max-width: 1258px;
	margin: 40px auto -220px;
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 271px;
	line-height: 271px;
	white-space: nowrap;
	background-image: linear-gradient(0deg, var(--c-navy-deep) 25%, var(--c-blue-grad) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	user-select: none;
	pointer-events: none;
}

/* ── Bouton retour en haut ────────────────────────────────────────── */

.op-backtotop {
	position: fixed;
	right: 24px;
	bottom: -48px;
	z-index: 9500;
	width: 45px;
	height: 45px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-navy-deep);
	color: var(--c-white);
	border: 0;
	border-radius: 30px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.4s ease, bottom 0.4s ease;
}

.op-backtotop.is-visible {
	bottom: 24px;
	opacity: 1;
}

/* ── Responsive global ────────────────────────────────────────────── */

@media (max-width: 1279px) {
	.op-header {
		display: none;
	}
	.op-header-mobile {
		display: flex;
	}
	.op-footer {
		padding: 80px 40px 50px;
	}
	.op-footer__main {
		flex-direction: column;
		min-height: 0;
	}
	.op-footer__left {
		padding-right: 0;
	}
	.op-footer__right {
		flex-basis: auto;
		border-left: 0;
		border-top: 1px solid var(--c-blue-sep);
		padding-left: 0;
		padding-top: 40px;
		margin-top: 40px;
	}
	.op-footer__wordmark {
		font-size: 180px;
		line-height: 180px;
		margin-bottom: -140px;
	}
}

@media (min-width: 1280px) {
	.op-header-mobile,
	.op-mobile-panel {
		display: none;
	}
}

@media (max-width: 767px) {
	.op-footer {
		padding: 70px 20px 40px;
	}
	.op-footer__title {
		font-size: 2.0625rem;
		line-height: 2.375rem;
	}
	.op-footer__cols {
		flex-direction: column;
	}
	.op-footer__wordmark {
		font-size: 100px;
		line-height: 100px;
		margin-bottom: -80px;
	}
	.op-inner-page {
		padding: 50px 20px 80px;
	}
	.op-inner-page .entry-title,
	.op-inner-page .page-title {
		font-size: 2.0625rem;
		line-height: 2.375rem;
	}
}